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Prólogo 


Antes de empezar con este proyecto reflexioné acerca de la manera de obtener el conocimiento desde los 
inicios de la escritura hasta nuestra manera actual de enfocar el aprendizaje. Me hizo pensar en cómo 
enfocábamos las cosas, la poca motivación que había al estudiar tecnicismos, y que el método tradicional 
estaba rotundamente desfasado. No soy un experto en psicología, pero todos somos buenos conocedores de 
todo cuanto nos ocurre y tenemos perspectiva. Pronto me di cuenta que lo que más me interesaba, me 
motivaba, me apasionaba, era aquello que podía entender desde la base y podía llevar al mundo real. Tenía que 
ser ameno, bien explicado, con imágenes cuando fuera necesario, con palabras cuando las imágenes quedaran 
cortas. Al ser posible siempre ayudado por alguien que ya hubiera tenido la osadía de entrar en ese campo 
experto. 

Recordé tiempo atrás mis años universitarios. Una de las asignaturas que más me incitó a lo que me dedico hoy 
día fue una humilde optativa, que pudiera haber pasado desapercibida como muchas otras por tener nombres 
poco agraciados o un poco publicidad. La asignatura se llamada “Computación ubicua”, un nombre que empieza 
por “computación” cosa normal si se estudia una ingeniería informática; pero lo de “ubicuo” sonaba a cualquier 
cosa menos a computación en cualquier lugar, donde sea, cuando sea. Cuando me matriculé en esa asignatura 
ni si quiera tenía un Smartphone, pero fue el momento clave en el que aprendí un montón sobre ¡OS. Sí, empecé 
con ¡OS antes que con Android, daría que pensar que ahora sería experto de ¡OS; a pesar de ello el destino no lo 
quiso así. Una serie de circunstancias, como que mi primer Smartphone fuera un Android, me llevaron a estudiar 
en profundidad todo sobre el sistema operativo del androide verde. Tanto que llevo trabajando con Android 
desde la versión 1.6. 

Muchos años de Android y muchos más de Java me encaminaron hasta esta publicación. He querido recoger el 
conocimiento de todos estos años y plasmarlo en una obra relacionada con Android, estudiando en profundidad 
tanto Java como XML. Realmente me parece una de las mejores maneras de aprender a programar para los que 
están iniciando en este mundo; y no solo de empezar, sino de adquirir conocimientos avanzados de la 
programación orientada a objetos, programación orientada a eventos, patrones, entre otros muchos que te 
convertirán en un buen programador. 

Tanto si estás leyendo esta obra como desarrollador pasional como programador empresarial, animarte a crear 
tus propias aplicaciones y subirlas a Google Play. Supongo que estarás conmigo en que pocas satisfacciones 
hay más que tu propia creación y sobre todo que dé frutos. 


5 


www.Jarroba.com 



Modo de empleo 



El libro de “Android 100%” se ofrece completamente gratuito y actualizado 
desde http://iarroba.com/libro-android-100-gratis/ 


El libro de “Android 100%” está diseñado para obtener una buena base, y convertirse en un experto en el 
dominio de Android y de paso de Java. Cada tema es incremental al anterior. El libro está estructurado a modo 
de preguntas muy comunes y sus respuesta, a cada cual dará lugar a nuevas preguntas que serán respondidas 
en las siguientes. 


Cada uno los temas mostrarán teoría muy detallada, cientos de imágenes, todo en español, con fragmentos de 
código que ayudarán a entender los ejemplos completos y referencias para completar todavía más el proceso de 
aprendizaje. Ejemplos completos de aplicaciones funcionales y con la posibilidad de descargar los proyectos; 
proporcionaremos todo el material necesario para seguir este libro. Todo un acabado profesional tanto a nivel 
de profundidad de las explicaciones, así como la estructura del libro en sí. 


Y por supuesto, podrás hacernos preguntas en cualquier momento, aportarnos sugerencias, peticiones, seguir a 
la comunidad de desarrolladores en muchos temas de informática técnica, y la posibilidad de aprender del 
ayudando a otros que están pasando por una situación que ya superaste, sin ningún coste en nuestro foro: 

http://iarroba.com/foro/ 


Te ofrecemos la oportunidad de conseguir maestría. De conseguir uno de los muchos puestos de trabajo que 
están esperándote en el mundo informático. De obtener reconocimiento por la creación de aplicaciones de 
calidad. Si compartes la visión por un mundo tecnológico mejor, estoy seguro que sabrás agradecer lo que este 
libro y la página de www.Jarroba.com te harán crecer. 


Tú decides cuánto estás dispuesto a aprender, cuánto estás dispuesto a superarte, cuánto quieres dominar 
sobre tecnología, te ayudaremos en todo cuanto podamos. Todo esto y mucho más en www.Jarroba.com 


Si te adoras tanto como nosotros la informática técnica, te gustará seguirnos en: 


• 

Youtube 

Jarroba Web 

https://www.voutube.com/user/Jarrobaweb 

* 

Twitter 

@JarrobaWeb 

https://twitter.com/JarrobaWeb 

• 

Facebook 

Jarroba.com 

https://www.facebook.com/iarrobaWeb 


Google Plus 

Jarroba Web 

httos://plus. google.com/-i-JarrobaWebProfesional/oosts 

g 

GitHub 

Jarroba Web 

httos://github.com/¡arroba?tab=reoositories 
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Apóyanos 


Estamos comprometidos al 100% con cada situación personal. Creemos ciegamente en las personas. Todo el 
mundo es consciente del gran trabajo que supone una obra como ésta, y sabrá agradecer la ayuda que le ha 
prestado. 


Puedes apoyarnos como más lo veas conveniente y justo. Por ejemplo, compartiendo nuestro trabajo o 
realizándonos una donación. Eres completamente libre de elegir la gratitud. Considera que este trabajo lo has 
hecho tú mismo, valora qué hubieras deseado recibir por este trabajo y cuánto te gustaría su continuidad. 


Donar 


Ponemos a disposición de todo el mundo un apartado de donaciones en: 


httPs://www.pavpal.com/cgi-bin/webscr?cmd= s-xclick&hosted button id=20T2VY3APMF30 
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Android 


Introducción 


¿Qué se puede hacer con Android? 
Algunos ejemplos son: 

O Navegar y buscar por el mundo 
O Conectarse y compartir 
O Entretenimiento digital 
O Crear y colaborar 

¿Qué tiene Android? 

Un resumen es: 

O App Widgets para el escritorio 
O Notificaciones 
O Multi-tarea 
O Reconocimiento de voz 
O Cámara de fotos y vídeos 




¿Un resumen de la historia de Android? 

Desarrollado por Android Inc desde 2003. Hasta que fue comprado por Google en 2005. 

Se liberó el código bajo licencia Apache al crearse la Open Handset Alliance el 5 de Noviembre de 2007. 
También considerado en cumpleaños de Android. 

En 2008 se crean los primero chips compatibles y se lanza el primer teléfono Android, el HTC Dream. 

Se empiezan a nombrar como dulces a las versiones de Android a partir de 2009. 


¿Qué características suelen tener los dispositivos con Android? 
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Gráficos: VGA, biblioteca de gráficos 2D, biblioteca de gráficos 3D basada en las especificaciones de la OpenGL 
ES 2.0 

Almacenamiento: SQLite 

Conectividad: GSM/EDGE, IDEN, CDMA, EV-DO, UMTS, Bluetooth, Wi-Fi, LTE, HSDPA, HSPA+, NFC y WiMAX 

Mensajería: SMS, MMS y C2DM 

Navegador Web: WebKit, motor JavaScript V8 

Multimedia: WebM, H.263, H.264 (en 3GP o MP4), MPEG-4 SP, AMR, AMR-WB (en un contenedor 3GP), AAC, HE- 
AAC (en contenedores MP4 o 3GP), MP3, MIDI, Ogg Vorbis, WAV, JPEG, PNG, GIF y BMP 

Streaming: RTP/RTSP (3GPP PSS, ISMA), descarga progresiva de FITML (FITML5 <video> tag), Adobe Flash 
Streaming (RTMP) 

Hadware: cámaras de fotos, de vídeo, pantallas táctiles, GPS, acelerómetros, giroscopios, magnetómetros, 
sensores de proximidad y de presión, sensores de luz, gamepad, termómetro, aceleración por GPU 2D y 3D. 

Bluetooth: A2DF y AVRCP, el envío de archivos (OPP) 

Videollamadas, Voz, Multi-táctil 

Tethering: usar al dispositivo como punto de acceso inalámbrico 

Referencias: 

O http://es.wikipedia.org/wiki/Android 

O http://visual.lv/sweet-historv-android 

O http://es.wikipedia.org/wiki/Android 
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Estado actual de Android 


¿Qué versiones existen de Android? 

Un sistema operativo Android tiene tres tipos de denominar a las versiones de Android, aunque las tres hacen 
referencia a la misma versión: 

O La comercial con el nombre de postre. Por ejemplo: KitKat 

O La de los fabricantes (y también comercial) con la versión y subversión. Por ejemplo: 4.4 

O La de desarrollador con el nivel del API (ésta nos interesa mucho para desarrollar en Android): Por 
ejemplo: 19 



Nombre 

Versión 

API 

Beta 

0 


Apple Pie 

1.0 


Banana Bread 

1.1 


Cupcake 

1.5 

3 

Donut 

1.6 

4 

Eclair 

2.0/2.1 

7 

Froyo 

2.2 

8 

Gingerbread 

2.3.2/2.3.7 

9/10 

Honeycomb 

3.0/3.1/3.2 

11/12/13 

Ice Cream Sandwich 

4.0/4.0.3 

14/15 

Jelly Bean 

4.1.2/4.2.2/4.3 

16/17/18 

KitKat 

4.4/4.4(Wear) 

19/20 

Lollipop 

5.0 

21 


¿Cuál es la cuota de mercado a nivel mundial de los Sistemas Operativos móviles? 


90,00% 
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19 
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2 - 

Trimestr 
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3^ 
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49 

Trimestr 

e 2012 

19 

Trimestr 

e 2013 

2 5 

Trimestr 

e 2013 

35 

Trimestr 

e 2013 

49 

Trimestr 

e 2013 

19 

Trimestr 

e 2014 

59,10% 

69,10% 

74,90% 

70,30% 

75,00% 

79,30% 

81,00% 

78,10% 

81,10% 

23,10% 

16,60% 

14,40% 

20,90% 

17,30% 

13,20% 

12,90% 

17,60% 

15,20% 

2,00% 

3,10% 

2,00% 

2,60% 

3,20% 

3,70% 

3,60% 

3,00% 

2,70% 
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¿Cuántos dispositivos activos hay de Android? 

Activaciones en millones (1 millón = 1.000.000) 



Se estima que en 2014 se activen unos 1,5 Millones de dispositivos cada día 


¿Cuál es la cuota de mercado a nivel mundial de las diferentes versiones de Android? 


Versión 

Codename 

API 

Distribution 

2.2 

Froyo 

3 

0.7% 

2.3.3- 

2.3.7 

Gingerbread 

10 

11.4% 

4 0.3- 

40.4 

Ice Cream 

Sandwich 

15 

9.6% 

4.1.x 

Jelly Bear 

16 

25.1% 

42.x 


17 

20.7% 

43 


18 

3.0% 

4.4 

KitKat 

19 

24.5% 



Jslly 


KiiKaí 


Frcyo 


Ice- Cregm 


Ilustración 1 - Imagen obtenida de la web de http://developer.android.com/. Datos recogidos durante un periodo de 7 días al finalizar el 9 de 
Septiembre de 2014 (Todas las versiones con una distribución de menos de un 0,1% no se mostrarán) 


¿En qué versión es aconsejable desarrollar en el año 2014? 

El autor de este libro recomienda a nivel general (salvo casos de necesitar acaparar cerca del 100% del 
mercado) centrarse en el desarrollo del número más alto de la versión mayor (a día de hoy 5.x). Motivos: 

O Las versiones previas tienden a desaparecer o a ser actualizadas 

O Las versiones antiguas no soportan muchas de las nuevas características (si las soportan con límites, 
como ActionBar), presentan problemas de seguridad, de rendimiento y están menos optimizadas a nivel 
energético 

De necesitar más cuota de mercado, la relación de mayor cuota de mercado con la versión mayor que más 
características soporta se obtiene al desarrollar desde la versión 4.0. 
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Versiones que no hay que tener en cuenta, debido a que apenas existan: 

O Versión 1.x. Demasiado antigua. La versión más moderna fue la 1.6, fue lanzada en Septiembre de 
2009 

O Versión 3.x. Era solo para Tablets, casi todas están actualizados a la 4.x (Casi todos los dispositivos que 
se vendieron con la versión 3.X pueden, en potencia, actualizarse a la versión 4.X, si no está actualizado 
es por falta de interés del poseedor del dispositivo) 

Referencias: 

O http://developer.android.com/about/dashboards/index.html 
O http://es.wikipedia.Org/wiki/Anexo:Historial de versiones de Android 
O http://es.engadget.com/2013/10/31/android-cuota-mercado-81-por-ciento/ 

O http://www.idc.com/getdoc.isp?containerld=prUS24108913 

O http://www.idc.com/getdoc.isp?conta¡nerld=prUS24257413 

O http://www.idc.com/getdoc.isp?containerld=prUS24442013 

O http://www.idc.com/getdoc.isp?conta¡nerld=prUS24676414 

O http://www.idc.com/prodserv/smartphone-os-market-share.isp 

O http://www.voutube.com/watch?v=lCVbQttKUIk 
O http://www.idc.com/getdoc.¡sp?containerld=prUS24857114 
O http://www.engadget.com/2014/06/25/google-io-2014-bv-the-numbers/ 

O http://www.androidpit.com/schmidt-android-activations-l-5-million-a-dav-l-billion-bv-2014 
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Idiomas 


¿Cuáles son los idiomas más hablados en el mundo? 


Hemos escogido seis más hablados, de los cuales, casi 
todas las personas sobre la Tierra conocen al menos 
uno si no es por ser primer idioma por segundo (sé que 
esto es debatible, pero bueno, pongo mi opinión, así 
puedes trabajar con dos opiniones, la tuya y la mía © ): 



¿En qué Idiomas se aconseja traducir nuestra 
aplicación? 



Chino 

45 % 


Español 

15 % 


Evidentemente una buena opción para elegir será la mayor relación de hablantes o personas que entiendan un 
idioma, y la posibilidad de que alguien se descargue o compre nuestra aplicación. 


Por ello el inglés debería de ser la opción más aconsejable, y el idioma por defecto para las carpetas de recursos 
(como veremos en el tema de Recursos). Además, si estás leyendo este libro no creo que tengas ningún 
problema en hacer la aplicación en español. Aunque con estos dos idiomas cubriríamos un 28% de hablantes, 
los que al menos entienden alguno de estos dos son bastante mayor que cualquier otro idioma. 


Otros idiomas importantes son el ruso y el chino. 

Como países emergentes en los que se habla los siguientes idiomas, es importante el indio, el árabe y el 
portugués. Tienen mucha cuota de mercado y son muy aficionados a descargar aplicaciones, sobre todo los de 
habla portuguesa (por experiencia Brasil descarga muchas Apps). 


Referencias: 

O http://www.ethnologue.com/statistics/size 

O http://iakubmarian.com/map-of-the-percentage-of-people-speaking-english-in-the-eu-bv-countrv/ 

O http://es.wikipedia.org/wiki/ldioma ingl%C3%A9s 
O http://es.wikipedia.org/wiki/ldioma espa%C3%Blol 
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Arquitectura 

Aplicaciones: cualquier tipo de aplicación escrita en Java. 

Framework de las aplicaciones: Acceso al API para rehusar componentes o modificarlos. 

Bibliotecas en C/C++: el desarrollador puede usarlas a través del Framework. 

Runtime de Android: bibliotecas del lenguaje Java y única instancia en la máquina virtual Dalvik. 

Núcleo Linux: Capa de abstracción del hardware y servicios de seguridad, gestión de memoria, de procesos, pila 
de red, modelo de los controladores, etc. 


Home 


Contacts 


Applications 

Phone 


Browser 


Activity 

Manager 

Package 

Manager 


Application Framework 


Window 

Manager 

Telephony 

Manager 


Contení 

Providers 

Resource 

Manager 


View 

System 

Location 

Manager 


Notificaron 

Manager 

XMPP 

Service 


Surface 

Manager 

OpenGL|ES 

SGL 


Libraries 

Media 

Framework 

FreeType 

SSL 


SQLite 


WebKit 


libe 


Android Runtime 

Core 

Libraries 

Dalvik Virtual 

Machine 


Linux Kernel 


Display 

Camera 

Bluetooth 

Flash Memory 

Binder (IPC) 

Driver 

Driver 

Driver 

Driver 

Driver 

USB 

Keypad 

WiFi 

Audio 

Power 

Driver 

Driver 

Driver 

Drivers 

Management 


Ilustración 2 - Imagen de la arquitectura de Android obtenida de la Wikipedia 


Referencias: 

O http://en.wikipedia.org/wiki/Android (operating svstem) 
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Herramientas de desarrollo 


JDK (Java Development Kit) 

¿Qué contiene? 

O JRE (Java Runtime Environment) 

O Herramientas para el desarrollo 
O Herramientas para la depuración 

O Herramientas para la monitorización de las aplicaciones Java 



¿Cómo conseguirlo e instalarlo? 

1. Eliie JDK en: http://www.oracle.com/technetwork/iava/iavase/downloads/index.html 


Java SE 
Java EE 
Java ME 

Java SE Support 

Java SE Advanced & Suite 

Java Embedded 

JavaFX 

Java DB 

Web Tier 

Java Card 

Java TV 

New to Java 

Community 

Java Magazine 


OverView i Downloads 


| Documentation || Community || Technologies || Training | 


Java SE Downloads 


Next Releases (Early Access) Embedded Use Previous Releases 



DOWNLOAD ♦ 


NetBeans 


Java Platform (JDK) 7u51 JDK 7u51 & NetBeans 7.4 


Java Platform, Standard Edition 


Java SE 7u51 

This release ineludes ¡mportant security fixes. Oracle strongly recommends that all Java SE 7 
users upgrade to this release. 

Learn more ¥ 


Which Java package do I need? 

■ JDK: (Java Development Kit). For Java Developers. Ineludes a complete JRE plus tools for 
developing, debugging, and monitoring Java applications. 

■ Server JRE: (Server Java Runtime Environment) For deploying Java applications on 
servers. Ineludes tools for JVM monitoring and tools commonly required for server 
applications, but does not inelude browser integration (the Java plug-in), auto-update, ñor 
an installer. Learn more » 

■ JRE: (Java Runtime Environment). Covers most end-users needs. Contains everything 
required to run Java applications on your system. 


Server JRE 


Java SDKs and Tools 

± Java SE 

± Java EE and Glassfish 
± Java ME 
i JavaFX 

♦ Java Card 

± NetBeans IDE 
± Java Mission Control 
Java Resources 
± Java APIs 
± Technical Articles 
± Demos and Videos 

♦ Forums 

± Java Magazine 

♦ Java.net 

± DevelooerTrainino 

♦ Tutorials 

♦ Java.com 

Get ¡t now 
forFREE! 

Subscribe Today 



JDK 7 Docs 

■ Installation Instructions 

. Porrillo 


Server JRE 7 Docs 

■ Installation Instructions 

. DoQHNfi 


JRE 7 Docs 

■ Installation Instructions 

■ PoorlMo 


2. Aceptamos la licencia y escogemos el JDK de nuestro sistema operativo y de la arquitectura (si no sabes 
que arquitectura es, de x86 o de x32, lee la nota a continuación). Comenzará la descarga de unos 130 
Mb 
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Java SE Development Kit 7u51 _ 

You must accept the Oracle Binary Code License Agreement for Java SE to download this 
software. 

• Decline License Agreement 


Product / File Description 

File Size 

Download 

Linux ARM v6A/7 Hard FloatAB! 

67.7 MB 

± j d k-7 u 51 -1 i n ux-a rm-vfp-hflt.ta r. gz 

Linux ARM v6/v7 Soft Float ABI 

67.68 MB 

± j d k-7 u 51 -1 i n ux-a rm-vfp-sflt.ta r. gz 

Linux x86 

115.65 MB 

± jdk-7u51-linux-i586.rpm 

Linux x86 

132.98 MB 

± jdk-7u51-linux-i586.tar.gz 

Linux x64 

116.96 MB 

S jdk-7u51-linux-x64.rpm 

Linux x64 

131.8MB 

± jdk-7u51-linux-x64.tar.gz 

Mac OS X x64 

179.49 MB 

± jdk-7u51-macosx-x64.dmg 

Solaris x86 (SVR4 package) 

140.02 MB 

± jdk-7u51-solaris-¡586.tar.Z 

Solaris x86 

95.13 MB 

± jdk-7u51-solaris-i586.tar.gz 

Solaris x64 (SVR4 package) 

24.53 MB 

± jdk-7u51-solaris-x64.tar.Z 

Solaris x64 

16.28 MB 

± jdk-7u51-solaris-x64.tar.gz 

Solaris SPARC (SVR4 package) 

139.39 MB 

± jdk-7u51-solaris-sparc.tar.Z 

Solaris SPARC 

98.19 MB 

± jdk-7u51-solaris-sparc.tar.gz 

Solaris SPARC 64-bit(SVR4 package) 

23.94 MB 

± jdk-7u51-solaris-sparcv9.tar.Z 

Solaris SPARC 64-bit 

18.33 MB 

± idk-7u51-solaris-SDarcv9.tar.az 

|Window^(8^^ 

123.64 MB 

± jdk-7u51-windows-i586.exe 

| Windows x64 

125.46 MB 

± j dk-7u 51 -win d ows-x64. exe 


¿Cuál es la arquitectura de mi sistema operativo Windows? 


En Desde Windows Vista en buscar escribe “sistema”, y elige “Sistema". En la ventana que se abre en “Tipo 
de sistema” aparecen la arquitectura del sistema operativo 



Cualquier otra duda al respecto puedes consultarlo en la página oficial en: 
http://windows.microsoft.com/es-es/windows/32-bit-and-64-bit-windows#lTC=windows-7 


3. Instalamos el JDK que se ha descargado. 
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Eclipse + ADT (Entorno de desarrollo Integrado) 

¿Qué contiene este paquete? 

O Editor de código 
O Compilador 
O Depurador 

O Gestor de pruebas unitarias 
O Constructor de interfaces gráficas 
O Gestor de plugins 
O Plugin ADT (Android Developer Tools) 

O Android SDK Tools 

¿Qué es el ADT y qué contiene? 

El ADT (Android Development Tools) es un Plugin para Eclipse viene con: 

O Creación de proyectos 
O Gestor de empaquetado e instalación 
O Depurador de errores 
O Integración con las herramientas del SDK 
O Documentación para las APIs framework de Android 
O Recursos enlazados mediante el fichero R.java 

O Editores de programación Java, editores de XML y editores gráficos de diseños de pantallas 
O Ayudas para la refactorización de los recursos 
O Gestor de actualizaciones del propio ADT 

¿Qué contiene el SDK? 

El SDK (Software Development Kit) es un paquete que incluye: 

O Depurador 
O Biblioteca Android 
O Simulador (ADB) 

O Documentación 
O Ejemplos de código 
O Tutoriales 
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¿Cómo conseguirlo e instalarlo? 


1. Pulsa el botón de descargar de: 

http://developer.android.com/sdk/index.html 


•jp 1 Developers Design Develop Distribute 


Training API Guides Reference Tools Google Services Samples 


DeveioperToois Get the Android SDK 


Download 

Setting UptheADT 
Bundle 

Setting Up an 
Existing IDE 

Android Studio 
ExploringtheSDK 
Download the NDK 


The Android SDK provides you the API libraries and 
developer tools necessary to build, test, and debug 
appsfor Android. 

If you're a new Android developer. we recommend you 
download theADT Bundleto quickly start developing 
apps. It ¡ncludestheessential Android SDK 
components and a versión of the Eclipse IDE with 
built-in ADT (Android Developer Tools) to streamline 
your Android app development. 


Workflow 
Support Library 
Tools Help 
Revisions 
ADK 


With a single download, theADT Bundle ineludes 
everything you need to begin developing apps: 

• Eclipse* ADT plugin 

• Android SDK Tools 

• Android Platform-tools 

• The latest Android platform 

• The latest Android system imagefortheemulator 



Download the SDK 

ADT Bundle for Windows 


2. Acepta el contrato, elige la 
arquitectura de tu sistema 
operativo (Si no sabes cuál 
poner, lee la nota a continuación) 
y pulsa en descargar para que 
comience la descarga de unos 
500Mb 


'ff Developers - Design 


Develop Distribute 


Training API Guides Reference Tools Google Services Samples 


DeveloperToois G©t the Android SDK 


Download 

Setting UptheADT 
Bundle 

Setting Up an v 

Existing IDE 

Android Studio v- 

ExploringtheSDK 

Download the NDK 

Workflow 

Support Library v 
Tools Help 
Revisions 
ADK 


Beforeinstalling the Android SDK you must agreetothefollowingtermsandconditions. 


1. Introduction 

1.1 The Android Software Development Kit (referred to in this License Agreement as the "SDK* and specifically 
including the Android system files, packaged APIs, and Google APIs add-ons) is licensed to you subject to theterms 
of this License Agreement. This License Agreement forms a legally binding contract between you and Google in 
relation to your use of the SDK. 

1.2 "Android" means the Android software stack for devices, as made available under the Android Open Source 
Project, which is located at the following URL: http://source.android.com/, as updated from time to time. 

1.3 "Google" means Google Inc., a Delaware Corporation with principal place of business at 1600 Amphitheatre 
Parkway, Mountain View, CA94043, United States. 


2. Accepting this License Agreement 

2.1 In order to use the SDK you must first agree to this License Agreement. You may not use the SDK if you do not 
accept this License Agreement. 


SI i haveread and agree with the above terms and conditions 
O 32-bit <§> 64-bit 


Download the SDK ADT Bundle for Windows 


3. Descomprimimos el fichero que se ha descargado en algún sitio del ordenador donde no lo vayamos a 
mover. Por ejemplo directamente en la unidad C. 



Disco local (C:) 


a % o ■ 


Seleccionar todo 
No seleccionar ninguno 
Invertir selección 

Seleccionar 


Propiedades 

■r í a 

Abrir 

v C Buscar en Disco local (ü) 
Fecha de modifica... Tipo Tamaño 

Carpeta de archivos 
Carpeta de archivos 
Carpeta de archivos 
Carpeta de archivos 
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4. Enviamos al escritorio el 
acceso directo de Eclipse 
que se encuentra en el 
ejemplo en la ruta “C:\adt- 
bundle-windows-x86_64- 
20131030\eclipse” 


Inicio Compartir 

n X Cortar 


Vista 


Herramientas de aplicación 

eclipse - n ES 

Administrar 

- O 


a □ ¿r-._ a ® x ■# b g 

Copiar Pegar ^ Mover Copiar Eliminar Cambiar Nueva 

0 Pegar acceso directo a , , nombre carpeta 


Propiedades 


Portapapeles Organizar Nuevo 

@ » f ijí ► Este equipo ► Disco local (C:) ► adt-bundle-w¡ndows-x86_64-20131030 ► eclipse 

Nombre Fecha de modifica... Tipo 


[■13 Abrir *• 

Q Modificar 

1^ Historial 


±i configuraron 
Ju dropins 
Íl features 

i M P2 

plugins 

readme 

lj .edipseproduct 
, i artifacts.xml 


' Este equipo 


eclipse.ini 
E3 eclipsec.exe 
O epl-v10.html 
O notice.html 


13 elementos 1 elemento seleccionado 305 KB 


□9 Seleccionar todo 
□o No seleccionar ninguno 
pq Invertir selección 

Seleccionar 

C Buscar en eclipse 
Tamaño 


Carpeta de archivos 
Carpeta de archivos 
Carpeta de archivos 
Carpeta de archivos 
Carpeta de archivos 
Carpeta de archivos 
Archivo ECLIPSEP... 
Documento XML 


1 KB 
80 KB 


Abrir 

Ejecutar como administrador 
Solucionar problemas de compatibilidad 
Anclara Inicio 


Enviar a 


Cortar 

Copiar 

Crear acceso directo 
Eliminar 

Cambiar nombre 
Propiedades 


Carpeta comprimida (en zip) 
Destinatario de correo 
Destinatario de fax 
r^| Documentos 


Escritorio (crear acceso directo) 


¿Y Android Studio? 


Tanto Android Studio como Eclipse son semejantes, puedes elegir cualquiera. En este libro hemos decidido 
hablar Eclipse para empezar el desarrollo con Android debido a que hay mucha más comunidad para Eclipse 
recomendamos empezar por este y no por Android Studio, ya que todavía está en beta. 

De cualquier manera, para seguir este libro sobre Android puedes hacerlo con cualquier entorno de 
desarrollo. 

Puedes ver como instalarlo en: http://iarroba.com/introduccion-a-android-studio-video/ 

Developers Design Develop Distribute $ 


Training API Cuides Reference Tools Google Services Samples 


Developet Tools 

Download 

Setting UptheADT 
Bundle 

Settingupan 
Existing IDE 


Migratmgfrom 

Eclipse 

TipsandTricks 
ExplonngtheSDK 
Download lite NDK 
Wortdtow 
Support Library 
Tools Help 



Getting Started with Android Studio 


EARLY ACCESS PREVIEW 
Android Studio is a new Android devdopment 
envuonment based on intelliJ IDEA Similar to Eclipse 
with the AOT Plugin. Android Studio provides 
mtegrated Android devdoper tools for devdopment 
anddebugging On topol the capatxlitiesyouexpect 
from Intellij. Android Studio offers 

• Gradle-basedbuild support 

• Android-specitic r ef ación ng and quicfcfixes 

• Lint tool s to catch performance usabi lity. versión 
compatibility and other problema 

• ProGuard and app-signing capabilities 

• Templatebasedwizardstocreatecommon 
Android designs and components 

• A ricblayout editor thataliowsyouto drag-and- 
drop Ul components. preview layouts on múltiple 
screen configurations. and much more 

• Built-m support for Google Cloud Platform ®. 
making it easy to intégrate Google Cloud 



Referencias: 

O http://iarroba.com/aprender-a-programar-conociendo-lo-aue-es-un-entorno-de-desarrollo-integrado-ide/ 

O http://www.eclipse.org/ 

O http://developer.android.com/sdk/index.html 
O http://developer.android.com/tools/help/adt.html 

O http://developer.android.com/sdk/index.html 
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Nuestro espacio de trabajo 


¿Cómo inicio mi espacio de trabajo? 

1. Iniciamos Eclipse desde el acceso directo que creamos previamente en el escritorio, 
o desde el ejecutable “eclipse.exe” 


Workspace Launcher 


Select a workspace 

ADT stores your projects in a folder called a workspace. 
Choose a workspace folder to useforthis session. 


Workspace; 


□ Use this as the default and do not ask again 




i ° k 


2. En la ventana que se nos 
abre elegiremos una carpeta de 
nuestro ordenador donde 
colocar el espacio de trabajo 
(Creamos una carpeta vacía donde 
queramos y la elegimos en esta ventana) 

3. Se abrirá Eclipse. Lo primero que nos mostrará 
será la pantalla de bienvenida que cerraremos 
pulsando en la X 




4. Ya estaremos en nuestro entorno de programación. 
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Source 


Android en Eclipse y configuración 


Navigal 


Nos fijamos en los dos iconos de Android en la barra de tareas (también 
están en menú “Windows”). 



SDK Manager 

¿Qué significa? 

Gestor del kit de desarrollo software de Android 



¿Para qué sirve? 

Para gestionar los paquetes de las APIs como las versiones de Android para desarrollar, drivers, etc 



¿Cómo se utiliza? 

Hacemos clic en su icono y se nos abrirá una ventana en la que esperaremos a que termine la barra de carga 
inferior. 

Aquí podremos marcar otras versiones de los sistemas operativos que queramos emplear principalmente en el 
emulador de Android (recomiendo primero el más actual que haya, a día de hoy la 4.4.2, y luego si se quieren 
instalar algunas como la 2.1, 2.3.3 y 4.0). Por defecto se seleccionará para instalar la última versión, de la que 
recomiendo instalar todo su contenido de su paquete (ya que viene con ejemplos y algunas utilidades de las que 
sacaremos provecho). También podemos elegir otros paquetes, o incluso seleccionarlo todos (son cerca de 
10Gb). 

Da igual que elijamos algo que nos pueda interesar o nada más, es necesario que siempre instalamos lo que el 
SDK Manager nos recomienda pulsando el botón de “Install X packages...”. 
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Android SDK Manager 


Packages Tools 

SDK Path: C:\adt-bundle-windows-x86_64-20131030\sdk 


Packages 


•ffi Ñame 
¿ □ □ Tools 

API 

Rev. 

Status 


□ f Android SDK Tools 


22.3 

Er Installed 


0 rf Android SDK Platform-tools 


19 

Ü Update available: rev. 19.0.1 


□ f Android SDK Build-tools 


190.1 

0 Not installed 


fjf Android SDK Bulld-tools 


19 

Er Installed 

□ f Android SDK Build-tools 


1&1.1 

H Not installed 


I | f Android SDK Build-tools 


18.1 

0 Not installed 


□ f Android SDK Build-tools 


1801 

0 Not installed 


]> Android SDK Build-tools 


17 

0 Not installed 


é \*\Ü2 Android4.4(AP119) 


0 [■ Documentaron for Android SDK 

19 

2 

0 Not installed 


0 W SDK Platform 

19 

1 

^ Update available: rev. 2 


0 ¿ Samples for SDK 

19 

3 

0 Not installed 


0 Bl ARM EABI v7a System Image 

19 

1 

^ Update available: rev. 2 


0 (¡I Intel xSBAtom System Image 

19 

1 

0 Not installed 


0 «S 1 Gooqle APIs 

19 

3 

0 Not installed 


0 |fÍ] Sources for Android SDK 

19 

2 

0 Not installed 







> DCS Android 4.2.2 (AP117) 





> OC£ Android 4.1.2 (AP116) 





0 Android 4.0.3 (AP115) 

> 0C£ Android 4.0 (AP114) 

> □ Android 3.2 (AP113) 

> 0C£ Android 3.1 (AP112) 

> 0C£ Android 3.0 (AP111) 

> □££ Android 2.3.3 (AP110) 

> 0C£ Android 2.2 (API 8) 

|> |I|C£ Android 2.1 (API 7) 

> DE* Android 1.6(API4) 

> DCÍ Android 1.5 (API 3) 

i GÜ Extras 

□ D Android Support Repository 


4 

0 Not installed 


0 Q Android Support Library 


19 

Ü Update available: rev. 19.0.1 


| | n GoogteAnatyticsAppTrackingSDK 


3 

0 Not installed 


□ n Googte Play Services for Froyo 


12 

0 Not installed 


□ □ Goog le Play Services 


15 

0 Not installed 


I | □ Goog le Repository 


6 

0 Not installed 


0 Q Goog te Play APK Expansión Library 


3 

0 Not installed 


□ n Googte Play Billing Library 


5 

0 Not installed 


[~1 n Goog le Play Licensing Library 


2 

0 Not installed 


0 n Goog le USB Driver 


9 

0 Not installed 


□ n Googte Web Driver 


2 

0 Not installed 


0 n l nte l EmulatorAccelerator (HAXM) 


3 

0 Not installed 




Show; 0 Updates/New 0 Installed OObsolete Select New or Updates 


Sort by; (•) API level O Repository Deselect All Delete 4 packages... 

*-' O -w 

Done loading packages. 


Al hacerlo nos llevará a una pantalla para aceptar las licencias. Los contratos que son iguales los podremos 
aceptar todos juntos; los que no tendremos que aceptar también aparte y pulsar el botón “Install”. 



Esperaremos a que descargue todo, podremos entonces cerrar el SDK Manager y volver a Eclipse 


Referencias: 

O http://developer.android.com/tools/sdk/tools-notes.html 
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AVD (Android Virtual Device Manager) Mana 

¿Qué significa? 

Gestor de los dispositivos virtuales de Android, es decir, los emuladores 


¿Para qué sirve? 


Para gestionar los emuladores de Android, cosas como la versión del sistema operativo que tendrán, el tamaño 
que ocuparán en pantalla, cuanta memoria consumirán, etc 




16:07 




O 


o 


© O (5) O 

<5> í* <!> <•> 


nBnnnanfvrsn 

PsaurfraüPSfSHis 

HflHBHBflüin 


¿Cómo se utiliza? 


Seleccionamos este icono para que se nos abra la ventana que estará vacía. 


Creamos un nuevo emulador pulsando en “New...” 



Se nos abrirá otra ventana para configurar el emulador. Aquí definiremos cosas como el nombre del emulador, 
el tamaño de pantalla y resolución del dispositivo que utilizaremos, la versión del sistema operativo de Android, 
entre otros. 

Recomiendo para empezar definir solo “AVD Ñame” con un nombre identificativo que nos indique el tamaño 
(como si simulará un Tablet o un Smartphone) y la versión de Android que elegiremos. En “Device” escogeremos 
un tipo de pantalla de dispositivo; hay muchos, recomiendo usar una de baja resolución, sobre todo si tenemos 
ordenadores poco potentes y para que el tamaño en pantalla sea manejable (podremos escalar estas pantallas 
por si no cupieran en nuestra pantalla del ordenador en el que vamos a desarrollar). También un “Target” que 
será la versión del sistema operativo que se iniciará con nuestro emulador. Recomiendo poner algo de memoria 
a la “SD Card” pues la necesitaremos más adelante (y para que no nos esté avisando Android todo el rato de 
que no hay tarjeta de memoria insertada); pero cuidado, todo este tamaño que definamos aquí será memoria de 
disco duro consumida (definir un tamaño pequeño, ya que se ocupará esa memoria al instante de crear el 
emulador). Pulsamos “OK” para terminar. 
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Ya lo tendremos configurado 



Android Virtual Devices 


Android Virtual Device Manager 

Device Definitions 


List of existing Android Virtual Devices located at C:\Users\ramon\.android\avd 



X An Android Virtual Device that failed to load. Click 'Details' to see the error. 


Podemos iniciar el emulador al pulsar “Start...". Aunque se puede hacer desde aquí, también desde Eclipse, 
desde donde es más cómodo para el desarrollo. Podemos cerrar la ventana del AVD y volver a Eclipse. 


5554:Smartphone4.4 


,|| H 6:13 Basic Controls 


Make yourself at home 

You can put your favorite apps here. 


© © © 

Hardware Buttons 

^ dft G} 

DPAO not enabled in AVD 

m 


To see all your apps, touch the circle. 
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¿Para qué sirve cada configuración del emulador? 

O AVD Ñame: ponemos un nombre identificativo (recomendable poner 
la versión del sistema operativo o el nivel de la API), como por 
ejemplo “Emu_4.3_Movil” 

O Device: Elegimos una resolución de pantalla acorde con la potencia 
de nuestro ordenador (recomiendo la densidad de “HVGA” (Por 
ejemplo, 3.2" HVGA slider (ADP1) (320 x 480; mdpi)). Por dos 
razones, una porque no exige un ordenador muy potente al ser de 
320x480 hay pocos píxeles que procesar; y segunda, para que sin 
tocar más, el emulador tenga un tamaño manejable en pantalla para 
la mayoría de los monitores). Para saber que significa cada sigla 
podemos ver una tabla con todas en: 

http://developer.android.com/guide/practices/screens support.html 

O Target: Elegimos el sistema operativo que instalaremos en el 
emulador que estamos fabricando. 

O CPU/ABI: Aquí se puede elegir que procesador simulado queremos 
que tenga nuestro emulador. Recomendamos que selecciones “ARM 


© 


Create new Android Virtual Device (AVD) 


AVD Ñame 

Device 

Target 

CPU/ABI: 

Keyboard: 

Skin: 

Front Camera: 
Back Camera: 

Memory Options: 

Internal Storage 
SD Card: 


@ Hardware keyboard present 
@ Display a skin with hardware Controls 

None 


None 


VM Heap: 


200 


MiB v 


(§) Size 
O File: 


Emulation Options: □ Snapshot nUseHostGPU 

Override the existing AVD with the same ñame 



(armeai-v7a)’’. Seleccionaremos otros para otras arquitecturas o para poder emplear tecnologías de 
aceleración del emulador de Android. 


O Keyboard: Si queremos poder usar nuestro teclado físico (el físico del ordenador, el que está junto al 
ratón) o no (en este caso solo podremos hacer uso del de pantalla). Recomendamos marcar la casilla. 

O Skin: Para mostrar los botones físicos (como atrás, home, volumen, apagar, etc). Recomendamos marcar 
la casilla. 


O Front Camera: Como queremos simular la cámara frontal. 

O Back Camera: Como queremos simular la cámara trasera. 

O Memory Options: Definimos la memoria RAM de unos 512 y VM Heap de unos 16 (espacio de 

almacenamiento dinámico para la máquina virtual; es el espacio necesario para tener una instancia de 
la máquina virtual Dalvik). 

O Internal Storage: Para definir la memoria interna de unos 200 MegaBytes (que es lo que está por 
defecto como “MiB”). 

O SD Card: en el campo “Size” ponemos una cantidad de 100 MegaBytes (que es lo que está por defecto 
como “MiB”). Ponemos una cantidad no muy elevada, ya que todo lo que pongamos será espacio que el 
emulador reserve en el disco duro. 


O Snapshot: De momento la casilla quedará desactivada hasta que veamos más adelante como usarlo. 
Como en algunos sistemas operativos, permite poner el emulador en suspensión para que cargue en el 
estado en el que lo dejamos la última vez (ahorra el tiempo de tener que esperar a que el sistema 
operativo se inicie). Así podremos iniciar el emulador más rápidamente. 

O Use Host GPU: Para usar la GPU de tu tarjeta gráfica (Usará las librerías de OpenGL instaladas por los 
drivers gráficos del ordenador). Si no vas a crear videojuegos, mejor déjala desmarcada de momento 
(más adelante podrás editarlo). 
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¿El Emulador tiene atajos de teclado? 

Teclas físicas del dispositivo: 

O Esc: Atrás 
O Inicio: Home 
O F2: Menú 

O F7: Bloqueo y apagado 
O +: Subir volumen 
O -: Bajar volumen 
O F5: Buscar 
O F6: TrackBall 
Vista del dispositivo: 

O 7: Cambiar la orientación 
O Alt + Entrar: Pantalla completa 



5554:Emu_4.3_Movil 

- ° Kl] 

1 ifil MiPrimeraApp 

M j A 2:13 

Basic Controls 

© © © 

Helio world! 


Hardware Buttons 

© © © © 



DPAO not enabled in AVO 



.<( )► 


Hardware Keyboard 

Use your physical keyboard to provide input 


Referencias: 

O http://iarroba.com/preDa rar-las-herramientas-necesarias-oara-programar-en-android/ 

O http://developer.android.com/tools/devices/index.html 
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Usar un dispositivo real en vez de un emulador 

Un dispositivo móvil es muy recomendable para utilizarlo para ultimar pruebas de una aplicación o directamente 
para poder probar características que el emulador no soporte (como la detección de más de un dedo en 
pantalla, el micrófono, o ciertos sensores como el acelerómetro, el de temperatura, de presión, etc). 

Podríamos sustituir completamente el emulador por un dispositivo físico, pero no siempre es lo más cómodo 
para el desarrollo. Además, reduciríamos su vida útil al darle un uso tan intensivo (el dispositivo ha de estar todo 
el rato enchufado al ordenador, por lo que la batería puede verse afectada en su autonomía; así como tener que 
estar continuamente instalando y desinstalando aplicaciones reducen los ciclos de uso de la memoria; además 
de que las aplicaciones en desarrollo al no estar optimizadas al ejecutarse podrían producir un calentamiento 
excesivo en el dispositivo con el consecuente efecto para los componentes). 

¿Cómo configuro nuestro dispositivo para depurar aplicaciones? 


1. Vamos a la “Ajustes” 


2. Si tenemos Android 4.2 o superior (en otro caso nos saltamos este paso y 
el siguiente) no aparecerán las opciones de desarrollo, están ocultas. Para 
hacerlas aparecer vamos a “Información del teléfono” 


C 1 

$ Información <tt teléfono 


información lega 
informador regutatona 
Número de modelo 
Versión de Android 
Versión de oanda base 
Versión del heme! 


Numero 


decompiac* 00 


3. (Este paso, al igual que el anterior, nos lo saltamos 
si tenemos una versión de Android inferior a 4.2) Ahí 
pulsamos varias veces sobre “Número de 
compilación” hasta que aparezca un mensaje que nos 
indique que se han activado las opciones de 
desarrollador. Con esto nos aparecerá en el menú 
anterior las opciones que necesitamos, por lo que 
volvemos atrás 



4. Elegimos “Opciones de desarrollo” (en otras versiones de Android el 
nombre será parecido) 



5. Es necesario activar la opción de 
“Depuración USB” (Si es una versión nueva de 
Android necesitaremos activar previamente las 
“Opciones de desarrollo”). Al activar la depuración 
USB tendremos que aceptar el mensaje. Un aviso de 
seguridad: cuando no estemos desarrollando 
tenemos que desactivar las opciones de depuración 
USB, y las opciones de desarrollo para los Android 
más modernos; de no hacerlo pondremos en riesgo 
nuestro dispositivo, pues se podrán instalar 
aplicaciones maliciosas sin nuestro consentimiento. 



6. Ya podemos enchufar nuestro dispositivo al ordenador. Aunque existen varias maneras lo mejor es por 
cable USB. 
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¿Cómo configuro nuestro ordenador? 

En nuestro ordenador lo que tenemos que hacerle es instalarle los drivers adecuados de nuestro dispositivo. Al 
enchufarlo por USB en modo desarrollo Windows nos instalará unos drivers genéricos o cono un poco de suerte 
los oficiales. Estos drivers lo más seguro es que nos sirvan, aunque no siempre es así o no suelen ser los más 
adecuados. 

Los mejor es ir a la página del fabricante y descargarnos los drivers apropiados a nuestro dispositivo. A 
continuación pongo una lista de dónde encontrar algunos (Nota: como nos patrocina ninguno ponemos los que 
nos da la gana en estricto orden alfabético y los quitaremos de la misma manera; como este libro está diseñado 
para desarrolladores Android facilitaremos una gran lista de los drivers para los dispositivos más populares): 

O Acer: http://www.acer.com/worldwide/support/index.html 

O Asus: http://www.asus.com/es/support 

O Dell: http://www.dell.com/support/drivers/us/en/19/ProductSelector 

O Google (se explica la instalación en la siguiente pregunta): http://developer.android.com/sdk/win- 
usb.html 

O HTC: http://www.htc.com/www/support/ 

O Huawey: http://consumer.huawei.com/en/support/manuals/index.htm 
O LG: http://www.lg.com/es/posventa/soporte-telefono-movil 
O Motorola: https://motorola-global-portal.custhelp.com/app/home/action/auth 
O Samsung: http://www.samsung.com/es/support/usefulsoftware/KIES/JSP 
O Sony: http://developer.sonvmobile.com/downloads/drivers/ 

O Sony Ericsson: http://www.sonvmobile.com/es/tools/sonv-ericsson-drivers/ 


¿Cómo instalo el driver genérico oficial de Android para diversos dispositivos? 

Este driver oficial de Google no solo sirve para que el ordenador reconozca únicamente a los dispositivos Nexus, 
sino también otros muchos cuyo sistema operativo no haya sido demasiado modificado y su Hardware se adapte 
a las especificaciones de Google (A otros dispositivos no les servirá). Lo que tenemos que hacer es lo siguiente: 

1. En Windows ir al “Administrador de dispositivos” (La imagen muestra un 
ejemplo del buscador de Windows 8) 


2. En el caso de los Nexus lo encontraremos en 
“Otros dispositivos”. Lo seleccionaremos con 
el botón derecho del ratón y elegimos 
“Actualizar software de controlador..." 




“ 




Administrador de dispositivos 



www.Jarroba.com 


28 































_ Actualizar software de controlador Nexus 5 


¿Cómo desea buscar el software de controlador? 


3. En la ventana que se nos abre seleccionaremos “Buscar 
Software de controlador en el equipo” 


•¥ Buscar automáticamente software de controlador actualizado 

Windows buscará en el equipo y en Internet el software de controlador más 
reciente para el dispositivo, a menos que haya deshabilitado esta característica en 
la configuración de instalación del dispositivo. 


Buscar software de controlador en el equipo 

Buscar e instalar el software de controlador deforma manual. 


Cancelar 


4. En la siguiente ventana lo buscamos en donde 
hayamos descargado el SDK de Android en la 
carpeta: sdk/extras/google/usb_driver 



Seguridad de Windows 



Busque software de controlador en el equipo 

Buscar el software de controlador en esta ubicación: 

\IDE\sdk\extras\google\usb_drivei] vj Examinar... 

@ Incluir subcarpetas 


Elegir en una lista de controladores de dispositivo en el equipo 

Esta lista mostrará el software de controlador instalado compatible con el dispositivo y todo el 
software de controlador que esté en la misma categoría que el dispositivo. 


Cancelar 


¿Desea instalar este software de dispositivo? 




Nombre Google, Inc. SAMSUNG Android Phone 
Editor Google Inc 


0 Siempre confiar en el software de "Google Inc". I Instalar I No instalar 


f' Solo debería instalar software de controlador de proveedores en los que confíe. 

¿Cómo puedo decidir qué software de dispositivo es seguro para instalar? 


5. Se nos preguntará que si lo queremos instalar, le decimos 
que “Instalar” 


6. Con esto ya lo tendremos instalado y nuestro dispositivo reconocido 


¿Ya está todo listo para poder lanzar aplicaciones a mí dispositivo? 

Si el dispositivo está es una versión anterior a Android 4.2 ya estará todo. 

Por el contrario, si se dispone de Android 4.2 o superior necesitaremos pasar por 
otra medida de seguridad que será desde el dispositivo permitir la depuración USB 
de un ordenador en concreto (lo tendremos que hacer una vez para cada 
ordenador en el que queramos desarrollar en Android). Para ello podemos marcar 
la casilla de “Permitir siempre desde este ordenador” y pulsamos “Aceptar”. Ahora 
sí que estaremos listos. 
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Acelerar el emulador de Android 

Es posible que notes que el emulador de Android no va tan rápido como nos gustaría. Una solución pasa por 
utilizar directamente un dispositivo móvil, pero en vez de esto existe otra solución. Usar una tecnología de Intel 
que acelera notablemente al emulador. 

Evidentemente, no es necesario utilizar este emulador veloz para desarrollar en Android, pero sí es mucho más 
cómodo. Si tienes la posibilidad de usar este emulador te lo recomiendo, notarás un flujo más suave en el 
desarrollo de aplicaciones de Android. 

Lamentablemente no todos los ordenadores son compatibles con esta tecnología. Para que sean compatibles 
han de tener un procesador Intel que soporte tecnología de virtuallzación de Intel (Intel Virtualization Tech). 


¿Cómo saber si mi procesador es compatible? 

Prácticamente todos los procesadores Intel que se venden hoy en día disponen de esta tecnología. Para ver el 
modelo de nuestro procesador lo podemos ver en Windows en “Sistema” (puedes buscar en el buscador la 
palabra “Sistema” como se ya se vio). Aquí veremos en el apartado “Procesador” si es Intel y el modelo 


0 


t I? ► Panel de control ► Sistema y seguridad ► Sistema 


Sistema 


Ventana principal del Panel de 
control 


Ver información básica acerca del equipo 


^ Administrador de dispositivos 

Configuración de Acceso 
remoto 

Hf 1 Protección del sistema 

l j§f Configuración avanzada del 
sistema 


Edición de Windows 


Windows 8.1 Pro 

© 2013 Microsoft Corporation. Todos los derechos reservados. 

Obtener más características con una nueva edición de Windows 
Sistema 

Procesador 

Memoria instalada (RAM): 

Tipo de sistema: 

Lápiz y entrada táctil: 


Configuración de nombre, dominio y grupo de trabajo del equipo 
Nombre de equipo: 

Nombre completo de 
equipo: 

Descripción del equipo: 

Grupo de trabajo: 


Vea también 

Centro de actividades 
Windows Update 


Activación de Windows 

Windows está activado Lea los Términos de licencia del software de Microsoft 

Id. del producto: 


v Cj Buscar en el Panel de control fi 

o 


¡¡Windows 8 


^Cambiar 

configuración 


Cambiar la clave de producto 


Conociendo el modelo podemos saber si nuestro procesador es compatible. Puedes comprobarlo en la página 
http://ark.intel.com/es-es/ . Introduce el modelo en el buscador de la web y elige tu procesador. 



Si bajamos hasta el apartado “Advanced Technologies” podremos comprobar si disponemos de esta tecnología. 
Si vemos un “Yes” en “Tecnología Intel de virtualización” podremos utilizar el emulador veloz de Android. 


B Advanced Technologies 

Tecnología Intel® Turbo Boost* 


2.0 

Tecnología Intel® vPro * 

@ 


Tecnología Intel® Hyper-Threading * 

S) 

No 

Tecnología Intel® de virtualización * 

Si 

□ 
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¿Cómo configurar el emulador rápido de Android? 

1. Vamos al SDK Manager de Android desde Eclipse. ctor Source N; 



2. Para descargar los archivos necesarios (en caso de tenerlos descargados vamos al siguiente punto). Uno 
imprescindible es ir a la carpeta “Extras” y descargar “Intel x86 Emulator Accelerator (HAXM)". Los otros 
que tenemos que descargar son las imágenes del sistema operativo preparadas por Intel, para ello 
vamos a las carpetas de Android de la versión que queramos descargar (en la captura siguiente vemos 
que estamos descargándola de “Android 4.2.2 (API 19)”) y descargamos las que se llaman “Intel x86 
Atom System Image”. 



3. Después de la descarga vamos a la carpeta donde tengamos instalado el SDK de Android. Nos dirigimos 
a la ruta “IDE/sdk/extras/intel/Hardware_Accelerated_Execution_Manager”. Encontraremos el 
ejecutable “lntellHaxm.exe” que ejecutaremos. 
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4. Naturalmente se nos abrirá un instalador. La primera pantalla nos dice esencialmente que solo va a 
funcionar si tenemos un procesador Intel y con tecnología de virtualización. Pulsamos en “Next” 


Intel® Hardware Accelerated Execution Manager Setup 


n 


x 



Intel Hardware Accelerated Execution 
Manager 1.0.6 (HAXM) 


This Installer guides you through the steps necessary to 
install Intel® HAXM on your system. 


Intel HAXM is a hardware-assisted virtualization engine 
(hypervisor) that uses Intel Virtualization Technology to 
speed up Android development. Please note that Intel HAXM 
can only be used with the Android SDK and Android x86 
emulator images provided by Intel. 


Intel* Software Tools 
for Android* 


Important: Intel HAXM requires an Intel processor with 
certain hardware features, induding Intel Virtualization 
Technology (VT). This installer will check whether your 
Computer can run Intel HAXM. 


Please refer to Intel® HAXM documentation for more 
informa tion. 


Intel® HAXM Documentation Next Cancel 


5. La segunda ventana nos preguntará que cuánta memoria RAM de nuestro ordenador vamos a ceder al 
emulador. Aquí hay que tener en cuenta que cuando se lance el emulador la va a consumir (A más RAM 
que le permitamos teóricamente irá más deprisa el emulador y más lento nuestro ordenador en general), 
con lo que se recomienda el valor por defecto que es un cuarto de la memoria del ordenador (para evitar 
problemas recomendamos que se pongan un mínimo de 2GB, pues hemos probado con menos y no 
siempre arranca). Seguimos en “Next”. 




Intel® Hardware Accelerated Execution Manager Setup 

Intel® Hardware Accelerated Execution Manager 

Memory limit for Intel HAXM 



Intel HAXM reserves a portion of RAM when running. Please set the máximum amount of 
RAM available for Intel HAXM to use for all x86 emula tor instances. 

Note: Setting a large memory reservaron may cause other programs to run slowly when 
using the x86 Android emulator with HAXM. 


(•) Default Valué 2.0 GB 

O Set manually |zÓ GB v 

The valué must be between 512 Mb and 6.0 Gb 

Cancel 


Intel® HAXM Documentation 


1 ^ | 


6. Casi hemos terminado cuando en la siguiente ventana pulsemos “Install” 


f Intel® Hardware Accelerated Execution Manager Setup - 


Ready to install Intel® Hardware Accelerated Execution Manager / ¡ni 


nte¡) 


Intel HAXM will use 2.0 GB of system memory for all x86 Android emulator instances. 
Note: The memory reservaron setrng can be changed by running this installer again. 
We log successful installabons of HAXM. 

For more informaron on Intel HAXM memory usage, please refer to Intel HAXM 
documentaron. 


Intel® HAXM Documentaron 


Back 


Install 


Cancel 
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Me ha aparecido un error 


Intel® Hardware Accelerated Execution Man... 



No asustarse, si nos aparece esta advertencia. Simplemente 
pulsamos en “OK” 



This Computer meets the requirements fcr HAXM, but 
Intel Virtualization Tedinology (VT-x) is not turned on. 
HAXM can be installed, but will not work until VT-x is 
enabled. 

Please refer to the Intel HAXM documentaban for more 
information. 


OK 



Simplemente nos indica que nuestro ordenador cumple con 
todos los requisitos pero que no tenemos activada la Tecnología 
de Virtualización. Para esto tendremos que ir a la Bios y activarla 
(lo explicamos un poco más adelante). 


7. Terminamos la instalación pulsando “Finish”. 


8. Nos lo haya pedido o no tenemos que reiniciar nuestro ordenador en este momento. 


¿Cómo activo la tecnología de virtualización del procesador? 


Solo es necesario si nos apareció el anterior mensaje de supuesto error, o si queremos asegurarnos de que esté 
activada. 

Nota: el sistema operativo de las Bios varía de una placa base a otra pero son parecidos, por lo que puede no 
parecerse a las imágenes aquí expuestas. Debido a la sensibilidad de esta parte del ordenador, recomendamos 
no tocar nada más de lo aquí explicado, o no hacerlo si no se tiene la total seguridad de que se está tocando ya 
que podemos estropear algo. Desde luego no nos hacemos responsables de esto, pese a que el proceso es muy 
sencillo y carente de riesgos si se hace bien. 

1. Para ello a la que se inicia el ordenador, en la pantalla de la placa base pulsamos o la tecla “Suprimir”, 
la de “Escape”, o la que nos indique esta pantalla para entrar en la configuración de la Bios. 

2. Aquí dependerá un poco del sistema de la Bios que tengamos. Pongo un par de ejemplo de dos Bios 
diferentes: 

En la siguiente captura vamos al 
apartado llamado “BIOS Features” y 
activamos (ponemos el valor a 
“Enable”) el que se llama “Intel 
Virtualización Technology”. 



Frequency 
FSB Speed 
Cache 11 
Cache L2 
Ratio Status 
Ratio Actual 


CPUID 

CPU Ratio Setting 

CIE Support 

Max CPIITn Ualúe Linit 

[Auto! 

[Enabled] 

[Disabled] 

Ti 

F1 

Select Screen 
Select Item 
Change Option 
General Help 



FIO 

Saue and Exit 

CPU TM iSTiST" 

ItnabledJ 

ESC 

Exit 

Execute Disable Bit 

[Enabled! 



Intel(R) SpeedStep(TM) Tech 

[Enabled] 




b. Otra imagen de ejemplo de otra Bios diferente, en 
el que hay que ir “Advanced” luego a “CPU 
Configuraron” y ahí activar el que pone “Intel(R) 
Virtualization Tech” 


UÜ2.61 (0 Copyright 1985-2008, American Megatrends, Inc. 


3. Para terminar guardamos y salimos, pulsando FIO y aceptando el mensaje 
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¿Cómo creo y utilizo un emulador con esta tecnología tan veloz? 


1. Cuando arranque el ordenador volvemos a Eclipse. Vamos al “Android Virtual Device 
Manager” para configurar un emulador. 

2. Aquí creamos un nuevo emulador pulsando “New...” 


□ 


Android Virtual Device Manager 


Android Virtual Devices Device Definitions 


List of existing Android Virtual Devices located at C:\Users\Ramon\.android\avd 


AVD Ñame Target Ñame Platform API Level CPU/ABI 

New... | 

Edit... 


Delete... 


Repair... 

Details... 


Start... 



Refresh 


s/ A valid Android Virtual Device. A repairable Android Virtual Device. 

X An Android Virtual Device that failed to load. Click 'Details 1 to see the error. 


3. Entre todos los parámetros de configuración los verdaderamente interesantes ahora son el “Target” para 
seleccionar una versión del sistema operativo en la que nos hayamos descargado la imagen de Intel (No 
sirven los que empiezan Google APIs (Google Inc.), sino los otros). Y sobre todo el apartado de “CPU/ABI” 
donde seleccionaremos para que nos procese todo “Intel Atom (x86)”. 



4. Ahora vamos a configurar lanzar el emulador que hemos configurado. Para ello vamos a Eclipse y 
pulsamos en la flecha negra que está justo a la derecha de a la flecha verde llamada “Run Stack”, ahí 
seleccionamos “Run Configurations...” 


i Project Run Window Help 

v? - 00 4 - m 3 ¡ 


, El 
El 
El 
El 
El 
El 
El 
El 
El 
El 


Organize Favorites... 
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5. En la ventana que se nos abre vamos a “Target”, elegimos nuestro emulador que hemos configurado, y 
lo ejecutamos con “Run”. 


<u> 


Run Configurations 


Create. manage. and run configurations 

Android Application 









6. El emulador se nos abrirá en unos segundos y se nos mostrará en la “Consolé” el siguiente mensaje 
diciendo que todo ha ¡do bien: “HAX is working and emulator runs in fast virt mode” 


Problems © Javadoc Declararon /^Search ID Consolé 23 ®LogCat HoProgress 
Android 


[ 


j - 

- ] Android Launch! 

- ] adb is running normally. 

] Performing com.jarroba.stack.MainActivity activity launch 

] Automatic Target Mode: Preferred AVD 'Smartphone4.4.2HAXM' is not available. Launching new emulator. 

- ] Launching a new emulator with Virtual Device ’Smartphone4.4.2HAXM’ 

- Emulator] emulator: device 

- Emulator] 

- Emulator] emulator: emulator window was out of view and was recentered 

- Emulator] 

] New emulator found: emulator-5554 

] Waiting for HOME ('android.process.acore• ) to be launched... 


Me aparecido un error y tengo Windows 8.1 


Puede que la consola no nos muestre el anterior mensaje sino este otro que es un mensaje de error, que 
significa que no está funcionando el emulador: 

emulator: Failed to open the HAX device! 

HAX is not working and emulator runs in emulation mode 
emulator: Open HAX device failed 

Para corregir esto tenemos que descargar el parche para Windows 8.1 de http://software.intel.com/en- 
us/articles/intel-hardware-accelerated-execution-manager e instalarlo. Prueba de nuevo y ya verás como el 
error se habrá solucionado. 

7. Ya podremos disfrutar de la velocidad punta de nuestro emulador Android 


Referencias: 

O http://iarroba.com/acelerar-el-emulador-de-android/ 

O http://developer.android.eom/tools/devices/emulator.html#accel-vm 

O http://software.intel.com/en-us/android/articles/speeding-up-the-android-emulator-on-intel-architecture 
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Primer Proyecto Android 


Crear nuestro 
primer Proyecto 
Android 


File Edit Refactor Run Source Navigate Search Project Window Help 


- : - | g ^Quick Access 


Jil tí % J Java 


B Package Explorer l 


□ S- Outline 23 D 

An outline ¡s not available. 


1 Java Project 


Copy 

Copy Qualified Ñame 

¡2| Paste 
X Delete 
jJUl Import... 
a A Export... 

Refresh 

Resource Configurations 


Alt+Shift+W I 

Ctrl+C 


Ctrl+V 

Delete 


|¡¿S Android Application Project 



Project... 


m 

Package 


& 

Class 


& 

Interface 


O 

Enum 


<£> 

Annotation 


m 

Source Folder 



Java Working Set 


es 

Folder 


0 

Ríe 



Untitled Text File 


a 

Android XML File 


m 

JUnit Test Case 


« 

Example... 



Other... 

Ctrl+N 


1. Ira Eclipse 

2. En el área llamada “Package 
Explorer” pulsamos con el botón 
derecho del ratón 

3. Creamos un nuevo proyecto 
pulsando “New” y luego 
“Android Application Project” 

4. Nos abrirá una nueva ventana 
para que configuremos el 
proyecto. Esta se sucede en una serie de ventanas que explicamos a continuación 


S_ Problems £3 avadoc DeclaraBon 

0 ítems 





^ □ 

Descríption 

Resource 

Path 

Location 

Type 



72Mof105M |QD; 


Configurar un nuevo proyecto 


Vamos a explicar todo y a indicar cuales son las configuraciones indicadas para empezar a programar con 
Android. Decir que aunque haya muchas cosas, casi el 90% de las veces que creemos un proyecto constará 
únicamente de pulsar en los botones de “siguiente” de este asistente que vamos a explicar. 


Paso 1: Crear una nueva aplicación Android 

¿Qué contiene esta ventana? 

O Application Ñame: Nombre que la aplicación 
tendrá en la Play Store 

O Project Ñame: Nombre del proyecto para Eclipse 

O Package Ñame: Paquete de nombre único que 
identificará a la aplicación durante toda su vida. 

O Mínimum Required SDK: La versión mínima de 
Android que la aplicación soportará 

O Target SDK: Con que versión de las librerías de 
Android trabajaremos 

O Compile With: Con qué versión se compilará. La 
versión más alta soportada 


(y) New Android Application 

New Android Application 

Creates a new Android Application 


Project Ñame© MiPrimeraApp 


| Package Ñame:© com.jarroba.miprimeraapp 

-1 



Mínimum Required SDK:*- 1 AP114: Android 4.0 (IceCreamSandwich) 

V 

Target SDK:0 AP119: Android 4.4 (KitKat) 

*1 

Compile W¡th:0 AP119: Android 4.4 (KitKat) 

v¡ 

Theme® Holo Lightwith Dark Action Bar 

vj 



Q Choosethe lowest versión of Android thatyour application will support. Lower API levels target more 

devices, but means fewer features are available. By targeting API 8 and later, you reach approximately 95% of 
the market. 
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¿Qué debo tocar aquí para mi primera aplicación? 

Únicamente has de ponerle un nombre a la aplicación (Application Ñame) y modificar nombre del paquete 

(Package Ñame) por defecto. 

Indicar que estos dos no deberemos cambiarlos en un futuro, con lo que tenemos que estar seguros de qué 
nombre de aplicación y de paquete ponemos (realmente sí se puede, pero si los modificamos a mano y no lo 
hacemos bien vamos a tener problemas tanto con el proyecto en Eclipse como con la Play Store). 

Para el nombre del paquete es recomendable poner una página web invertida (también podremos poner nuestro 
nombre, apellido u otro, siempre con letras minúsculas y sin espacios, tan solo separados por puntos). Por 
ejemplo de www.iarroba.com. el nombre del paquete será “com.jarroba” seguido del nombre de nuestra 
aplicación en minúsculas; como la aplicación se llama “MiPrimeraApp”, el nombre del paquete resultará como 
“com.jarroba. miprimeraapp”. 

El SDK mínimo (Minimum Required SDK) dependerá de la cuota de mercado que queramos acaparar o de las 
características avanzadas que queramos utilizar: 

• Llegar a los más usuarios posibles: “API 10: Android 2.3.3 (Gingerbread)” (menos no lo recomiendo, se 
pierde muchísimo tanto en avances como en seguridad, y no aporta muchos más usuarios) 

• Máxima relación usuarios con características avanzadas: “API 14: Android 4.0 (IceCreamSandwich)” 

• Lo último en tecnología Android sin importar la cantidad de usuarios: La más alta que haya 

Para un desarrollador siempre es deseable una alta. Para empezar da un poco igual, pero en un futuro será 
recomendable usar de la 4.0 en adelante para poder usar características avanzadas. 

Luego tanto el SDK objetivo (Target SDK) como el de compilación (Compile With) en mi opinión deberían de ser 
los más altos que hayan (En “Compile With” es recomendado seleccionar la más alta, salvo casos que se 
requiera que la app solo funcione en versiones antiguas del sistema operativo Android), para trabajar siempre 
con las bibliotecas de Android más avanzadas y que la compilación se realice de la manera más óptima. 

El tema (Theme) dejamos el que está. 

Continuamos en “Next >” 


Paso 2: Configurar el proyecto 

¿Qué contiene esta ventana? 

O Create custom launcher icón: crea un icono 
para la aplicación (Es decir, saltarse o no el 
siguiente paso) 

O Create activity: crea la primera actividad con un 
hola mundo 

O Mark this Project as a library: para que el 
proyecto sea una librería 


¿Qué debo tocar aquí para mi primera aplicación? 
Nada. Tal como está pulsamos “Next >”. 
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Paso 3: Configurar los atributos del icono 

¿Qué contiene esta ventana? 

O Esta ventana solo aparece si hemos 
seleccionado previamente Create custom 
launcher icón 

O Foreground: El primer plano del icono puede ser 
una imagen que queramos, un dibujo 
prediseñado o un texto 

O Trim Surrounding Blank Space: Recorta el 
espacio sobrante y lo rellena con la imagen 

O Additional Padding: Relleno 

O Foreground Scaling: Si queremos cortarlo o 
centrarlo 

O Shape: La forma del icono que puede ser la que 
tenga el dibujo, en forma de cuadrado o de 
círculo 

O Background Color: el color del fondo del icono 
¿Qué debo tocar aquí para mi primera aplicación? 



Añadir un icono que queramos a la aplicación en donde pone “Image File”. Aquí es interesante añadir un icono 
de alta resolución para que este asistente se encargue de escalarla y que no pierda demasiada calidad 
(Siempre será mejor diseñar un icono específico para cada resolución, en vez de usar este asistente, pero para 
facilitarnos la vida está bastante bien). Este icono (cuando creemos el proyecto lo veremos llamado como 
“icjauncher.png” dentro de la carpeta “res/drawable”) será el que aparezca tanto en el escritorio de Android 
(HomeScreen) para abrir la aplicación, como en la barra de título o de acciones (ActionBar); además de crearnos 
la imagen que necesitaremos para la Play Store (dentro del proyecto aparecerá con el nombre “icjauncher- 
web.png”) 


Podremos configurar otras opciones, pero con esta es suficiente. Así que pulsamos en “Next >”. 


Paso 4: Seleccionar si crear una Activityyqué tipo 

¿Qué contiene esta ventana? 

Create Activity: si queremos que se cree alguna plantilla de 
aplicación. Estas son: 

O Blank Activity: Crea una única actividad con 
Fragments y con Action Bar 

O Empty Activity: Crea una Activity vacía 

O Fullscreen Activity: Aplicación a pantalla completa, 
que al pulsar sobre la pantalla muestra la Action Bar y 
un botón en la parte inferior que permanecían ocultos 


New Android Application 

Create Activity 

Select whetherto create an activity, and if so, what kind of activity. 


0 Create Activity 



.MI 


Empty Activity 

Fullscreen Activity 

Master/Detail Flow 




Blank Activity 

Creates a new blank activity, with an action bar and optional navigational elements such as tabs or horizontal swipe. 







< Back | Next > 

j 

Cancel 


O Master/Detail Flow: Crea una lista con elementos seleccionables que se adaptan mediante Fragments 
tanto a Smartphone como a Tablets 


¿Qué debo tocar aquí para mi primera aplicación? 


Nada. En un futuro será interesante elegir alguno de estos por ahorrarnos código, pero ahora nos interesa 
aprender cómo. Tal como está pulsamos “Next >”. 
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Referencias: 


O http://developer.android.com/tools/proiects/templates.html 


Paso 5: Seleccionar si crear una Activity y qué tipo 

¿Qué contiene esta ventana? 

O Activiy Ñame: el nombre de nuestra Activity 
principal 

O Layout Ñame: el nombre de la vista de diseño 
asociada a nuestra Acivity principal 

O Fragment Layout Ñame: el nombre del primer 
Fragment que contendrá la Acitivity principal 

O Navigation Type: Tipo de navegación entre las 
diferentes partes de nuestra aplicación para 
nuestra aplicación. Puede ser: 

O None: ningún tipo de navegación 



O Action BarTabs (with ViewPager): Pestañas que se pueden alternar arrastrando el dedo por la 
pantalla 


O Swipe Views (ViewPager): Páginas que se pueden alternar arrastrando el dedo por la pantalla 
O Action BarSpinner: Navegación desplegable 


O Navigation Drawer: Navegación mediante menú lateral 


¿Qué debo tocar aquí para mi primera aplicación? 

Nada. Podremos cambiar el nombre de la Activity (Activity Ñame) o el nombre de su diseño asociado (Layout 
Ñame), pero para seguir este libro recomiendo no cambiarlo de momento, luego será muy fácil. Tal como está 
pulsamos “Finish”. Habremos terminado de configurar nuestro primer proyecto de Android. Ahora solo queda 
programar. 


39 


www.Jarroba.com 
























Primer vistazo de un proyecto Android 


Vamos a repetir el mismo proceso anterior pero en el paso “Paso 4: Seleccionar si crear una Activity y qué tipo" 
vamos a seleccionar “Empty Activity”. Y en el paso 5 pulsamos sobre “Finish”. (Cuando aprendamos utilizaremos 
casi para cualquier proyecto “Blank Activity”, pero para los primeros recomiendo aprender con “Empty Activity”) 


10) New Android Application 

Create Activity 

Select whether to create an activity, and if so, what kind of activity. 


@ Create Activity 



Creates a new empty activity 






1 

® < Back 

Next > 

Finish Cancel 





Al terminar el asistente anterior nos habrá quedado un entorno de trabajo como el siguiente. 



www.Jarroba.com 


40 


































Vamos al fichero que se llama MainActivity.java. Para ello podemos hacerlo o bien pinchando en la pestaña 
abierta, o dentro del paquete Java en el mismo fichero. 



File Edit Refactor Source Navigate Search Project Run Window Help 

r3 ¿'ñ 8!0’’ 1 í : X W Gt w & & 4* w ^ *■ I * 

¡Quick Access . Ei5 1 1 Java © DDMS 

:« Package Explorer £3 “ □ o adivity_mainjaml 

0 ^ ^ | 1 package com.jarroba.miprimeraapp; 


d jJJ MiPrimeraApp 
é src 

a itWonyarrobajmignmeraapp 
|iÚ MainActivity.java | 

2? gerMüenerate^av^lesJ 
t> bA Android 4.4.2 
> e& Android Prívate Libraries 
¿3 assets 
t> £3 bin 
t> £3 libs 
d res 

> £3 drawable-hdpi 
£3 drawable-ldpi 
;> £3 drawable-mdpi 
;> £3 drawable-xhdpi 
:> £3 drawable-xxhdpi 
d £3 layout 

|<£ activity_mainj(ml 
:> £3 valúes 
t> £3 values*v 11 
:> £3 values-v14 
O AndroidManrfestJcml 
% icjauncher-web.png 
[ 2 ) proguard-projecttxt 
( 2 ) project.properties 


% 3® import android.app.Activity;Q 

8 public class MainActivity extends Activity < 

9 

10© SOverride 

A 11 protected voíd onCreate(Bundle savedlnstanceState) { 

12 sopar. onCreate(savedlnstanceState); 

13 setContentView(R.layout. activity_main) ; 

14 > 

15 } 

16 


Search O Consolé 23 ®LogCat HoProgress 


Android 



Git Repository Exploring 

= □ 


= □ 

* SB | cí S - rt - 


i < > 

Writable Smart Insert | 1:1 202Mof615M ¿J I 

Si te fijas está dentro de una carpeta llamada “src”. Aquí irá todo nuestro código Java. 

¿Y el fichero activity_main.xml? Es para la vista de diseño, es decir, lo que ve el usuario: botones, textos, etc. 
Échale un vistazo y fíjate que se encuentra dentro de la carpeta “res” (de reso urces que significa recursos), y 
más concretamente en la carpeta “layout” (que significa diseños). 
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Probar nuestras aplicaciones 


Para esto tendremos que tener un emulador configurado al menos con la misma versión o más alta del sistema 
operativo que hayamos elegido para compilar (en la primera ventana del asistente antes explicado en “Compile 
with”) o un dispositivo enchufado al ordenador en modo debug. 

Tal como está la aplicación podemos ejecutarla: 

-ch Project Run O Si tenemos abierto un fichero Java de la aplicación y lo tenemos seleccionado podremos 
P- P ulsar en ,a Aecha verde 

O Otro modo es pulsando con el botón 
derecho del ratón sobre la carpeta del 
proyecto de la aplicación y eligiendo “Run 
As” y “Android Application" 


tf! Package Explorer l 


B % 


© 


Run As 


Select a way to run 'aaa': 


Andró id JUnit Test 

ED Java Applet 
E Java Application 
Ju JUnit Test 


Description 

Runs an Android Application 


© i o* i r 


Cancel 


4 I ¿7 MiPrimeraApp | 




é í¿3 src 

é 3 com.ja 


N 

Go Into 



> (T) Ma 
[> gen [Gene 

o Android 4. 


Open in New Window 

Open Type Hierarchy 

F4 


> ■X Android P 


Show In 

Alt+Shift+W ► 


assets 
[> ¿b- bin 
[> ib libs 

m 

m 

Copy 

Copy Qualified Ñame 

Ctrl+C 


4 ¿b res 

m 

Paste 

Ctrl+V 


|> drawat 

X 

Delete 

Delete 


£> drawat 
|> drawat 


Build Path 

► 


[> £=? drawat 


Source 

Alt+Shift+S ► 


|> £> drawat 


Refactor 

Alt+Shift+T ► 


d ^ layout 
[g] act 

ib1 

Import... 



t> £> menú 
t> £> valúes 
l> & valúes- 

tú 

Export... 



& 

Refresh 

F5 


|> (S? valúes- 


Cióse Project 



t> £> valúes- 


Assign Worlcing Sets... 



^ AndroidlV 


Run As 


!] ] 1 Android Application 

BÜ icjaunche 


Debug As 

► | ju 2 Android JUnit Test 


Al arrancar la primera 
vez el emulador para 
esta aplicación, 
aparecerá una 
pequeña ventana 
llamada “Run As”. 

Aquí seleccionamos 
“Android Application” y 
pulsamos “OK”. 

Con esto la aplicación se lanzará en el dispositivo o en el emulador. 


Si vamos a trabajar con el emulador y no lo tenemos abierto este se iniciará. 


El emulador por primera vez 

Cada vez que arranquemos el emulador tarda cerca de un minuto 
en arrancar la primera vez. Luego no hace falta que lo cerremos, 
podremos ejecutar tantas aplicaciones como queramos sobre 
este emulador abierto. 

Siempre se inicia bloqueado (como cualquier dispositivo), para 
desbloquearlo basta con pinchar y arrastrar (variará dependiendo 
de la versión que hayamos arrancado de Android) 

Los botones del emulador simulan los botones físicos de un 
dispositivo con Android. Estos son: 

O Primera línea: 

o Bajar volumen 

o Subir volumen 

o Apagar dispositivo 

O Segunda línea: 

o Home (volver al escritorio) 
o Menú (En desuso, podría desaparecer en versiones posteriores de Android) 

o Atrás 

o Buscar (No lo suelen tener los dispositivos de Android) 


5554:Smartphone4.4 - n ^^9 

“l - 

?-ññ 

Charging, 50% 

O 

Basic Controls 

Cjfc © 

Hardware Buttons 

0 § 0 ^ 

DPAD not enabled ¡n AVO 

i® 

Hardware Keyboard 

Use your physical keyboard to províde input 
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O Tercera línea con los cursores físicos (tampoco suele 
ser habitual en dispositivos Android) 

O Luego hay una indicación que nos dice que para 
simular el teclado físico usemos nuestro teclado del 
ordenador (en versiones antiguas de Android aparecía 
un teclado en esta parte del emulador, pero es más 
cómodo el teclado del ordenador) 

Si hemos ejecutado el “Helio Word!” anterior, lo veremos en 
pantalla del emulador como en la imagen de al lado. 

Cada vez que lancemos la aplicación desde Eclipse, Android la 
instalará y lanzará automáticamente en este emulador. 


Trazas y log 


5554:Smartphone4.4 - n IE9 j 

”ll «• 2:56 

Basic Controls 

MiPrimeraApp 

A0O 

Helio world! 



mC V) 

/ '<r 


Hardware Keyboard 

Use your physical keyboard to províde ínput 


¿Son ¡guales las trazas de Android a las de Java? 

Si hemos utilizado Eclipse para otros proyectos, seguramente estamos acostumbrados a utilizar el apartado 
“Consolé” para ver el volcado de logs, trazas y eventos. Programar en Android se programa con Java, pero a 
diferencia de Java como tal, que podemos crear trazas con: 


Traza Java 


System. out . print ("Mi mensaje de la traza"); 


En Android no nos sirve, pues una vez en el emulador se le pasa el control a este y por tanto a Android y a su 
SDK, por lo que usaremos algo ligeramente diferente, como: 


Traza Android 


Log.v ("Tag", "Mi mensaje de la traza"); 


¿Cómo abro el logcat? 

La primera vez ejecutemos una aplicación -tanto en el 
emulador como en un dispositivo- nos aparecerá una 
ventana en Eclipse titulada “Auto Monitor Logcat”. 
Podemos pulsar en “Yes, monitor logcat and...”, aceptar la 
ventana y ya se abrirá solo el Logcat. 



Si la hemos cerrado sin más o no nos ha aparecido, no pasa nada, es fácil de mostrar. 


Wir 






New Window 


D'l ' 

¡Quick Access 


New Editor 





HideToolbar 





Open Perspective ► 



° B | Sí Outline t 






Show Vi ew ► | 

1* 

Ant 



Customize Perspective... 


Consolé 

Alt+Shift+Q c 

M¡ 


Save Perspective As... 

& 

Decía ration 

Alt+Shift+Q D 



Reset Perspective... 

« 

Error Log 

Alt+Shift+Q, L 


1 

Cióse Perspective 

@ 

Javadoc 

Alt+Shift+Q, J 



Cióse All Perspectivas 

fe 

Navigator 





Se 

Outline 

Alt+Shift+a 0 



Navigation ► 

18 

Package Explorer 

Alt+Shift+Q, P 


3 □ 

Android SDK Manager 

R 

Problems 

Alt+Shift+Q X 


L S 

Android Virtual Device Manager 


Progress 



0 

Run Android Lint ► 


Project Explorer 




Preferences 

* 

Search 

Alt+Shift+Q S 




a 

Tasks 





B 

Templates 





* 

Type Hierarchy 

Alt+Shift+Q T 





Other... 

Alt+Shift+Q Q 



1. Vamos a la barra de herramientas de Eclipse a “Windows/Show 
View/Other...” 


2. En la ventana que se nos abre, desplegamos la 
carpeta “Android”, elegimos “LogCat” y aceptamos 


y Allocation Tracker 
Q Devices 
^ Emulator Control 
ijyi File Explorer 
@ Heap 
■tj LayoutView 
^^^ün^Wamings 

fí^^gCatl 

^^^^^^Udeprecated) 
*5* NetWork Statistics 
Pixel Perfect 
Pixel Perfect Loupe 
<A. Pixel Perfect Tree 
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De cualquiera de las dos maneras se nos va a abrir el LogCat, que es donde se mostrarán las trazas. 



¿Cómo se programan las trazas? 


Esta traza de Android requiere que importemos la biblioteca: android.util.Log 

Como está puesto en el anterior código, todas las trazas comienzan con 
“Log” y luego un método que es una letra minúscula. Existen varias trazas en 
Android, estas se dividen principalmente por el nivel de la advertencia más 
básica hasta el error más grave. A continuación se muestran ordenados 
desde el más grave al menos: 


Truco Eclipse: Importar todo 


Cuando haya que importar una 
o varias bibliotecas en Eclipse 
-en vez de ir una a una- tan 
sólo tendremos que pulsar la 
combinación de teclado: [Ctrl] 
+ [Mayús] + [O] 


• Error: Error que provoca un fallo de ejecución (el evento que 
ocasionó el error; como el típico NullPointerException por ser 
nula una variable donde no debe) 


Log.e("Tag", "Mi mensaje ); 


• Warn: Advertencias (eventos que no van a provocar error pero Log.w("Tag", "Mi mensaje") ; 

que debieran revisarse; como que no se ha podido cargar una 

imagen y se ha devuelto una predeterminada) 

• Info: Información (normalmente datos de interés como estados, Log. i ("Tag", "Mi mensaje") ; 

valores, etc; un ejemplo sería indicar el tamaño consumido de la 

memoria) 

• Debug: Depuración (para mostrar una serie de eventos de Log. d( "Tag", "Mi mensaje") ; 

depuración y registrarlos; como el cambio del valor de una 

variable mientras se usa el programa, para estudiar su comportamiento) 


• Verbose: Detallar (cuando no sepamos que etiqueta usar o si las Log.v("Tag", "Mi mensaje") ; 
trazas no van a ser finales) 


www.Jarroba.com 


44 



























¿Un ejemplo por pasos de cómo se programa una traza? 


1. Añadimos dentro del método “onCreate” la traza que dice (fíjate en que el “Tag” ahora es “test” y al 
terminar lee la siguiente pregunta). Log.v ("test", "Mi mensaje de la traza") ; 


2. Aparecerá una línea roja 
debajo de la palabra Log 

3. Situamos el cursor encima de 
la línea roja y seleccionamos 
del cuadrado que se nos abre: 
“Import ‘Log’ (Android.util)” 


<3313 

1 LocJv("test", "Mi mensaje de la 


} 

'(fa Log cannot be resolved 

16 } 


9 quickfixes available: 


1 Á Imccrt 'Lcci 1 landrcid.utih 1 






□ C reate co.nstanLLofl! 

O Create local variable 'Log' 


4. Ejecutamos la aplicación 


5. Miramos en el LogCat nuestra 
traza 



¿Cómo filtro los mensajes que salen en el LogCat para que no aparezcan tantos? 


Para crear un filtro en el LogCat pulsamos el botón En el cuadro de dialogo que se abre, rellenar el campo 
“File Ñame” con el nombre que queramos que tenga el filtro. El resto de campos son optativos, aunque para 
empezar recomiendo rellenar el campo “by Log Tag”. Los campos que aparecen son los siguientes: 


O by Log Tag: Etiqueta que pondremos para 
filtrar (recomiendo una palabra corta por 
comodidad). Por ejemplo, si escribimos por 
ejemplo “test”, pondremos: Log.v(“test”, 
“este mensaje se filtra por el TAG”); 

O by Log Message: Filtrar por una parte del 
mensaje. 

O by PID: Filtra por el identificador del 
proceso. 

O by Application Ñame: Filtra por el nombre 
de la aplicación. 


<& Java - M¡Pr¡meraApp/src/com/jarroba/m¡pr¡meraapp/Ma¡nActivity.java - ADT 

File Edit Refactor Source Navigate Search Project Run Window Help 

rt- S @;0- t ; x - o - & -\& ■? - - - - - 5^ 




t3 PacRage Explorer Sx 
a \S MiPrimeraApp 


í Andro¡dMan¡fest.xml 


0 MainAdivttyjava £2 


t com.jarroba.miprimeraapp 
0 MainActivity.java 
3 gen (Generated Java Files] 

A Android 4.4.2 


1 Logcat Message Filter Settings 

1 Filter logcat messages by the source's tag, pid or mínimum log level. 

1 Empty fields will match all messages. 


Filter f 

'lame MiFiltroPersonalizado| 1 


by Log Tag: test 

b) 

< Log Message: 


by PID: 

1 by Application 1 

Mame: 


by Log Level: verbose v 

< 2 > 

✓ 

V OK | Cancel 


Saved Fi 
All messages (no filters) 


.Dedaraüon 0 Consol ■) LogCat S3 
] “ if |Search for messages. Accepts Java regexes. PreTni with pid, app:,| [yerbóse ' 


H 1 D 1 


O by Log Level: Filtra por el nivel del Log 
(Dicho mal y pronto, filtra por colores). 


Una vez creado volvemos a ejecutar 
el programa. De este modo al 
volver a ejecutar se nos filtrará por 
el tag “test” que pusimos. 


[L Problems @ Javadoc Deciaration S Consolé ’flí LogCat 23 “ □ 


Saved Filters + “ 

All messaqes (no filters) (1892) 

1 MiFiltroPersonalizado 


Search for messages. Accepts Java regexes. Prefix with pid:, app:, tag: ortext to 1 verbose v H l^l QO A 

Level Time PID TID Ap... Tag Text 

com.jarroba.miprimeraapp (Se 

| V 1828 1828 test Mi mensaje de la traza 



Referencias: 


O http://iarroba.com/preparar-las-herramientas-necesarias-para-programar-en-android/ 

O http://developer.android.com/reference/android/util/Log.html 


O http://developer.android.com/tools/debugging/debugging-log.html 
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Estructura de ficheros del proyecto 


1. src: Contiene el código Java (código dinámico) 

2. gen: Código generado automáticamente por el SDK. NOTA: 

No modificar manualmente. 

O BuildConfigjava: indica si la aplicación está en 
desarrollo 

O R.java: Clase automática que asocia el contenido de 
la carpeta res con identificadores para poder llamar a 
los recursos desde Java. 

3. Android x.y: biblitecas oficiales y liberadas de Android, de la 
versión elegida 

4. Android Private Libraries: Bibliotecas asociadas al proyecto 
que se ha añadido al path (es decir, para que se tenga 
acceso a las clases, con ello a los métodos y variables, para 
poder utilizarlos en el programa) desde la carpeta bin. Por 
defecto viene con una biblioteca que se llama “android- 
support-vX.jar”, que incluye tanto soporte para versiones 
antiguas de Android como utilidades beta o que todavía no 
han sido liberadas 

5. assets: Carpeta para introducir ficheros varios (Nota: las 
imágenes mejor guardarlas en la carpeta res), que 
permanecerán invariantes. Estos ficheros no serán asociados por R. 

6. bin: se guarda el código compilado 

7. libs: donde guardaremos las bibliotecas JAR en bruto (lo que es copiarlas de donde la tengamos, como 
puede ser el escritorio después de haberla descargado de Internet, y pegarla aquí dentro). Esta carpeta 
viene con una biblioteca de regalo “android-support-vX.jar” y que ya está añadida al path, como se indicó 
previamente. 

8. res: carpeta de recursos de la aplicación (La explicamos con detalle en el capítulo de Recursos) 

9. AndroidMan¡fest.xml: Representa la información esencial de la aplicación que debe de conocer el 
sistema operativo, antes de que la ejecute. Entre otras cosas contiene: 

O Nombres de los paquetes de la aplicación. 

O Los componentes esenciales de una aplicación, que son: Activities, Services, 

BroadcastReceivers, y ContentProviders 

O Los permisos para acceder a las partes protegidas de la API o para interactuar con otras 
aplicaciones 

O Declara el nivel mínimo del API de Android que requiere la aplicación 

O La lista de librerías que están vinculadas 

10. icjauncher-web.png: Icono de alta resolución (512x512, 32-bit PNG con alfa, de tamaño máximo 
1024KB) que aparecerá en Google Play 

11. proguard-Projecttxt: Configuración de ProGuard para que reduzca, optimice y ofusque el código. 

12. projectproperties: Contiene la configuración del proyecto y el destino para ser generado. Este fichero 
que se genera automáticamente, para modificarlo pulsar con el botón derecho sobre el proyecto y 
seleccionar “Properties”. 




Ñ src 

4 $ trazos-ramon.miprimeraapp 

J MiActivityPríncipal.java 

* 9*” 

s tfi trazos.rameo.miprimeraapp 1 
2) BuildConfigjava 

a Wá Android 4.3 
£• android.jar 

I 4 Wk Android Prívate Libraries I 

- android-support-v4.jar 

r* assets 

4 ¿j- b«n 

decedLibs 

r> ^ res 

O AndrcidManrfest.xml 

j ciasses.dex 

C jariist.cache 

MiPnmeraApp.apk 

^resoorces^ap. 

1 4 hbs 

1 m andro»dsupport-v4.jar 

^ res 

AndroidManifest-xml 

(ft, K launc^^ef* , wePpr!g , ™ 

progoard-project!a^^ 

project-propeífíe^™ 
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Principios 


Fundamentos de una aplicación 

Teoría básica 

Se explicarán una serie de puntos para aclarar algunos conceptos de Android, pero indagaremos en cada uno a 
medida que avances por las páginas del libro: 

O Instalación de una App: Las aplicaciones Android se firman con un certificado y se empaquetan en un 
fichero .apk 

O Android tiene permisos multi-usuario: Cada aplicación pertenece a un usuario (User ID Linux) diferente y 
solo puede acceder desde ese 

O Procesos: Cada proceso se ejecuta sobre su propia máquina virtual. Por defecto, cada aplicación corre 
en su propio proceso Linux 

O Principio de privilegios mínimos: una aplicación solo tiene acceso, por permisos asignados en el 
AndroidManifest.xml, únicamente a los componentes que requiere y nada más 

O Compartir datos entre Apps: Se puede pedir permiso para acceder a los contactos del usuario, mensajes 
SMS, cámara, Bluetooth, etc 

O No existe el main(): A una aplicación se puede acceder desde varios componentes si están dispuestos 
para ello 

O Componentes de una aplicación: son bloques para construir aplicaciones Android con roles bien 

diferenciados. Todos los componentes son puntos de entrada a la aplicación (del usuario o del sistema). 
Cada componente tiene su propio ciclo de vida (son creados y destruidos) 

O Programación en Android: 

O Java: para programar dinámicamente. Para la lógica del programa (por ejemplo, para hacer el 
qué es lo que ocurre cuando se pulsa un botón); siguiendo el patrón MVC (explicación del patrón 

MVC en http://es.wikipedia.org/wiki/Modelo Vista Controlador) para el controlador y el modelo. 

O XML: para programar estáticamente. Para la parte visual (por ejemplo, para dibujar el botón en 
pantalla); siguiendo el patrón MVC para la vista. También para información estática (como 
pueden ser los textos de la aplicación con sus idiomas). 

Referencias: 

O http://developer.android.com/guide/components/fundamentals.html 

O http://developer.android.com/guide/topics/resources/available-resources.html 
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Componentes de una Aplicación 

¿Cuáles son los componentes básicos? 

Una aplicación puede estar formado por una o varios componentes básicos: 

O Activity: Representa una pantalla con interfaz de usuario. 

> Ejemplo : de la App de correo, la pantalla de redactar un 
correo 

O Service: Se ejecuta en segundo plano, para realizar operaciones de 
larga duración o para realizar trabajo proveniente de procesos 
diferentes. 

> Ejemplo : escuchar música sin tener la App en primer plano 

O Contení Provider: Permite a otras Apps consultar o modificar los 
datos almacenados en otra App. 

> Ejemplo : la App de contactos integrada en Android permite 
que otras App accedan a estos, como Whatsup que puede 
agregar contactos o consultarlos de ahí 

O Broadcast Recelver: Responde a mensajes difundidos a todo el sistema. Se puede notificar al usuario 
mediante la barra de notificaciones del sistema. 

> Ejemplo : notificar a la App que la batería del dispositivo está baja; o recibir mensajes push y 
mostrar al usuario un mensaje de recibido en la barra de notificaciones 


Market 



My Apps 


Accounts 


Settings 


Music 


Books 


Movies 



Save a 

n ti 


¿Es necesario declararlos en el AndroidManifestxml? 

Todos hay que declararlos en el AndroidManifestxml 

¿Se van explicar todos en este capítulo? 

No, en este capítulo se explicará el primero: Activity. El resto se explicará a medida que se aprendan los 
principios necesarios para poder utilizarlos. Será entonces cuando demos explicación y ejemplos en profundidad 
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Activity 

¿Qué es? 

Algo enfocado a lo que el usuario puede hacer (de ahí que sea una “Actividad”). Por lo que interactúa con el 
usuario directamente. Es la ventana que llena a toda la aplicación, que contiene a la interfaz de usuario. Si 
cambiamos de ventana cambiaremos de Activity. 

¿Se puede dividir en otras Activities más pequeñas contenidas en una Activity? 

No, de eso se encargan los Fragments 

¿Cómo se le asocia un Layout? 

Justo después de la llamada al padre del método onCreate() con setContentView(R.layout.mi_layout) 

¿De qué extiende la clase? 

De Activity 

¿Cómo se abre una nueva Activity? 

Con Context.startActivity(lntent milntent) (Veremos esto en profundidad más adelante) 

¿Cómo se declara en el AndroidManifest.xml? 

Con el tag <activity> 

¿Cómo se comporta una Activity cuando otra la sustituye? 

Cuando una Activity se inicia, comienza en la cima de la pila de Activity. La Activity que está en la cima de la pila 
es la que se está ejecutando y mostrando al usuario. El resto de Activities quedarán por debajo en la pila. En el 
momento en que la Activity sobre la cima se desapile (deje de existir; por ejemplo al pulsar el botón de “atrás”), 
la que está por debajo será la que ahora ocupe la cima de la pila y por tanto la que estará al frente del usuario. 


Foreground activly 

Activity 1 

Back Stack 


Referencias: 

O http://iarroba.com/activitv-entender-v-usar-una-actividad/ 

O http://developer.android.com/reference/android/app/Activitv.html 
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Ciclo de vida de una Activity 


Una Activity se caracteriza por tener un ciclo de vida. Se llama igual que el ciclo de vida de un ser vivo, ya que 
son semejantes: nace, crece, come, se reproduce y muere. 


El usuario se desplaza 
hasta la actividad 


El proceso de la 
aplicación es matado 


Actividad 
iniciada 

i 

onCreate() 

i 

onStartf) 

i 

onResumef) 

Actividad en ejecución 

i 

Otra actividad se pone 
en primer plano 

+ 


onRestart() 


El usuario regresa 
a la actividad 


App con prioridad 


alta necesita memoria 


onPause() 

i 

La actividad ya 
no es visible 

+ 

onStopf) 


El usuario se desplaza 
hasta la actividad 


nr 

La actividad ha terminado o ha sido 
destruida por el sistema operativo 

i 

onDestroy() 


i 


Actividad 

cerrada 


Supongamos que tenemos un en la mano un dispositivo con una aplicación iniciada. Por tanto habrá una Activity 
en pantalla, que podrá seguir varios caminos durante su vida, como: 

O Arrancar la Activity: Pasará por Crear, Empezar y Continuar, para llegar a la ejecución normal. 

O Usar de manera normal la Activity: estamos en la Activity propiamente, estamos en ejecución. 

O Una ventana emergente se ha abierto: Pasará por Pausar. 

O Cambiar a otra Activity o bloquear el móvil: Pasará por Pausar y Parar. (Nota aclaratoria: si se cambia a 
otra Activity pasa necesariamente por pausar y parar, no ha tenido que surgir una ventana emergente 
para pasar por pausar, si se cambia de Activity se pasa por ambos estados directamente; esto se da con 
otras acciones que pasen por varios estados). 

O Apagar el móvil: Pasará por Pausar, Parar y Destruir. 
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El ciclo de vida completo que hemos visto en el gráfico anterior se traduce en el siguiente código (Todos los 
métodos son opcionales, aunque el onCreate() se recomienda usar siempre): 


Activity con todos los métodos de su ciclo de vida 


public class miActividad extends Activity { 

QOverride 

public void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
//Nuestro código a ejecutar en este momento 

} 

QOverride 

public void onStartO { 
super .onStart(); 

//Nuestro código a ejecutar en este momento 

} 

QOverride 

public void onRestart() { 

super .onRestart(); 

//Nuestro código a ejecutar en este momento 

} 


QOverride 

public void onResumeO { 
super .onResume(); 

//Nuestro código a ejecutar en este momento 

} 

@Override 

public void onPause() { 

super .onPause(); 

//Nuestro código a ejecutar en este momento 

} 

@Override 

public void onStopO { 
super .onStop(); 

//Nuestro código a ejecutar en este momento 

} 


@Override 

public void onDestroy() { 

super .onDestroy(); 

//Nuestro código a ejecutar en este momento 

} 

} 


Nota y repaso del primer proyecto 


Seguro que empiezas a unir piezas. Ya que 
existen cosas en común a la primera 
aplicación que hicimos. Por lo menos, la 
clase Java extendía de Activity y que tenía 
al método onCreateQ. 


Java - MiPrimeraApp/src/com/jarroba/mi 


File Edit Refactor Source Nsvigate Search Project Run Window Help 


3 Package Explorer 53 “O 

E % * 

é \S M.PrimeraApp 

a 

a 9 com.jarroba miprimeraapp 
[7) MeinActrvity.java 
t> ¿9 gen [Generated lava Files] 

■k Android4A2 
> Wk Andrord Prívete Librarles 
assets 
:■ bin 

2Mb. 

O AndtoidMamfest »ml 
í K_launcher-v.eb.png 

C proguard-projecttxt 
Q] projectproperties 


' ac.«ty_main wnl 

package coi 


2] WamAdMtyjava 53 
.3arroba.miprineraapp; 


^ñbTTr class K^iAc^^^^^xtencls Activity ( 

protected void onCreate(Bundle savedlnstanceState) ( 
super. onCreate(savedlnstanceState); 
setContentView(R.layout. activity_«ain) ; 


B P ' u jlJ 


-m ¿a l r* s - n • - □ 


Wntable Smart Inserí 14:2 I 135Mo»39ÍM Ó) 
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A continuación se muestra en detalle cómo funciona cada método: 


Método 

¿Cuándo se llama? 

¿Qué debería hacer? 

¿Qué hay que tener en cuenta? 

onCreateO 

Al crearse 

Crear views, unir datos a listas, etc 

Entrega datos en un Bundle si la 
activity ha sido re-creada 

on RestartO 

Fue pausada y 
vuelve a ejecutarse 



onStart() 

Al hacerse visible 
para el usuario 

Recuperar el estado 


onResumeO 

Al comenzar la 
iteración con el 
usuario 


En este momento la activity se 
sitúa en la cima de la pila 

onPause() 

Al perder el foco 
(cuando ya no 
interactúe con el 
usuario) 

Se suele usar para guardar los 
cambios no guardados, para detener 
animaciones u otras consuman 
procesador 

Cuando el onPauseQ termine, se 
realizará el onResumeO de la 
nueva activity. Se recomienda 
código rápido 

onStop() 

Al no ser visible 
para el usuario 

Guardar el estado 

Ejemplo: otra nueva activity ha 
hecho su onResumeO y a 
cubierto a esta 

onDestroyO 

Justo antes de ser 
destruida 

Liberar sus recursos y limpiar su 
estado 

Por la llamada a finish() o 
porque Android la haya matado 


Estados de una Activity 

Hay que tener en cuenta la probabilidad de que Android destruya nuestra Activity, en cara a salvar los datos y 
volverlos a cargar cuando la Activity vuelva a pantalla; lamentablemente esto hay que hacerlo manualmente. 


Estado 

Causa 

Mantiene 
estado interno 

Unido al gestor 
de ventanas 

Riesgo de que 
Android la mate 

Activa o en 
ejecución 

Si está en primer plano 
(encima de la pila) 

Sí 

Sí 

Bajo 

Pausada 

Si pierde el foco pero está 
todavía visible 

Sí 

Sí 

Medio 

Parada 

Está completamente oculta 

Sí 

No 

Alto 

Matada 

No existe 

No 

No 

- 
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Vidas de una Activity 


Actividad 

iniciada 


Sabiendo que puede morir nuestra Activity en cualquier momento. Es 
importante conocer las tres posibles clasificaciones de la vida, para poder 
crear y destruir, o guardar y cargar cuando sea necesario. Vidas: 


O Completa: desde el onCreate() donde crea el estado global, hasta el 
onDestroyO donde libera los recursos 

O Visible: desde el onStart() donde se recupera el estado, hasta el 
onStop() donde se guarda el estado 

O Primer plano: desde el onResumeQ, hasta el onPauseQ 


Muertes de una Activity 

Puede ser destruida 

Si está: 

O En ejecución: 



onCreate() 

‘ P 3 ) 

onStartQ |J J 

i 

onResumeQ 

—t— 

Actividad en ejecución 

i 

onPauseQ 


* El 



O Durante la ejecución de los métodos onPauseQ, onStopQ u onDestroyQ. 


O Al cambiar algo de la configuración del dispositivo. Por ejemplo, al rotar la pantalla. 


O SI ha perdido el foco o no es visible: Si Android requiere los recursos que está consumiendo 


Actividad en ejecución 


onCreateQ ó 

onRestorelnstanceStateQ 

Tienes que restaurar el estado de 
tu Activity 

t 

El usuario navega 
hasta la Activity 

El proceso de la aplicación es matado 

(La instancia de la Activity es 
destruida, pero el estado proveniente 
del onSavelnstanceState() es salvado) 


Otra Activity entra en primer plano, 
bajando a ésta en la pila 

I 

onSavelnstanceStateQ 

Tienes que salvar el estado del tu 
Activity 


Una aplicación 

-con alta prioridad- Actividad no es visible ■ 

necesita memoria 


La instancia de la Activity está intacta; 
por lo que no necesita restaurar su estado 


onRestartQ 

I 

El usuario navega 
hasta la Activity 


Tratar el estado ante ¡a muerte y re-creación 

Tendremos que: 

O Guardar el estado al hacerse no visible (solo si tiene sentido ser re-creada): 
onSavelnstanceState(Bundle) 

O Recuperar el estado al re-crearse (tiene que haber muerto previamente): 

O Al ser creada otra vez con onCreate (Bundle savedlnstanceState): El Bundle será diferente de 
nuil 

O Después de onStartQ: onRestorelnstanceState (Bundle savedlnstanceState) 
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Ejemplo de Activity 


Este cuadro con una flecha explicará cada parte de la 
estructura del ejemplo que viene a continuación. El resto 
de ejemplos en este libro siguen el mismo patrón 


Lo que haremos 

Crearemos un nuevo proyecto vacío con “Empty Activity”, como ya vimos en 
“Paso 4: Seleccionar si crear una Activity y qué tipo”. 

En la clase Java “MainActivity.java” sustituiremos el código que hay. 

< 

Arrancaremos la aplicación como se describió en el capítulo previo. 

Veremos en el LogCat las trazas que se han puesto al arrancar la 
Activity, y cuando salgamos de ella (pulsando la tecla de atrás). 


En esta parte titulada "Lo 
I que haremos" explicaremos 
lo que vamos a hacer en el 
ejemplo y los pasos a seguir 
para llevarlo a cabo 


Nota: En este ejemplo no tocaremos nada de la interfaz gráfica, solo es para ver algunos ejemplos del 
comportamiento de Activity. 







Será habitual ver alguna 
imagen con un móvil. 
Donde veremos el 
resultado de la ejecución 


Ilustración 3 - Lo que se verá en pantalla, aunque no nos interesa en este ejemplo (solo puesto como demostración del tutorial) 


EZZD 

Seved Filien ♦ — 

AI mcs» 9 es (no fAon) (2540) 
Test 


learch fot Accepti a receses. Prtfn weh 


E Puede haber otras 

imágenes de apoyo que 
servirán de ayuda en la 
comprensión 


1_ Time 

PIO 

TO 

Appfacatoon 

T.9 

Tes 


V 

1030 

1030 

cob. 3 arrobe. actividad 

test 

Creare 

Al arrancar 
la App 

V 

1030 

1030 

coa. 3 arroba.actividad 

test 

Start 

V 

1030 

1030 

cob. 3 arroba, actividad 

test 

Resus* 

V 

1030 

1030 

cob. 3 arroba.actividad 

test 

Pause 

Al cerrar 

V 

1030 

1030 

cob. 3 arroba.actividad 

test 

Stop 

la App 


Ilustración 4 - Al ejecutar la aplicación o al terminarla nos mostrará en el Log el recorrido del ciclo de vida de Acvitity. Hay otros muchos, que 

iremos viendo 


www.Jarroba.com 


54 






Proyecto 1 


A partir de aquí te sugiero que abras Eclipse, e intentes hacer el ejercicio con la teoría previa (o 
que programes la solución mientras la entiendes). Lo que hagamos en un ejercicio habrá sido 
explicada con anterioridad, por lo que puedes hacerlo sólo fácilmente y sin mirar la solución 


a £7 Actividad 
d \¿3 src 

\ com.¡arroba.actividad 


| [7] MainActivity.java| 


géruGeñerátecnáv^TTesJ 

> Android 4.4.2 

> Android Prívate Libraries 
¿5 assets 

> & bin 
t> libs 

> & res 

[g] AndroidManifest.xml 
icjauncher-web.png 
[ 2 l proguard-project.txt 
[§| project.properties 


Al inicio del proyecto se muestra la 
estructura de ficheros que 
seguiremos con el código en Eclipse. 
Se marcara en rojo los ficheros 
modificados 


MainActivity.java 


import android.app.Activity; 
import android.os.Bundle; 
import android.útil.Log; 

public class MainActivity extends Activity { 

private static final String TAG = "test"; 

@Override 

public void onCreate(Bundle savedlnstanceState) 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. fragment_main ); 



En este libro se explicarán las últimas versiones de Android. Por lo que no habrá 
código “Deprecated”. Esto tiene sus ventajas (mayor estabilidad, menos 
consumo, lo último) y sus desventajas (en las versiones de Android antiguas o no 
funcionan o no van muy bien). 

Para aprender recomiendo que tanto en “Mínimum Required SDK” (se podrá bajar 
en un futuro), como en “Target SDK” y en “Compile With” establezcamos la última 
versión disponible. 
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Fragmente 

¿Qué es? 

Es un comportamiento (no visible) o una porción de la interfaz 
gráfica (visible). Es decir, es un módulo que puede unirse a 
otros 


¿Para qué surgieron? 



Para que una misma aplicación pudiera ser multi-pantalla. Por este motivo, su mayor virtud es la reutilización de 
código. 


Supongamos que tenemos ciertas funcionalidades en varios Fragments. Para las diferentes Activitys, 
dependiendo del dispositivo, podremos acomodarlos de diferente manera. Hay que atender a que si nos 
pasamos poniendo Fragments para cierto tamaño de pantalla, se verá el contenido de cada Fragment 
demasiado pequeño y podría ser difícil de manejar; por el contrario, quedarnos supondría desaprovechar la 
pantalla. Unos ejemplos podrían ser (no es obligatorio cumplir con los siguientes ejemplos): 


Fragment 

Activity 


OSmartphone: en el que cabe 1 Fragment por Activity 

OTablet: en el que caben 2 Fragments por Activity 

O SmartTV: en el que caben 4 Fragments por Activity 


Fragment 

Fragment 

Fragment 

Fragment 

Activity 


Fragment 

Fragment 

Activity 


¿Qué ofrecen? 

O Modularidad: Se pueden poner donde queramos 
O Reusabilidad: Se pueden reutilizar tantas veces como se necesiten 


¿Dónde se colocan los Fragments? 

Siempre sobre una Activity. Dicha Activity se denomina “Activity contenedora” de Fragments 


¿Tienen ciclo de vida? 

Sí. El Fragment se mantendrá en ejecución mientras lo esté su Activity contenedora 


¿Hay que declararlo en el AndroidManifestxml? 

No. Solo se declara su Activity contenedora 


Referencias: 
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O http://iarroba.com/fragments-fragmentos-en-android/ 

O http://iarroba.com/programar-fragments-fragmentos-en-android/ 

O http://developer.android.com/guide/components/fragments.html 

O http://developer.android.com/reference/android/app/Fragment.html 

O http://developer.android.com/training/multiscreen/screensizes.html 


Ciclo de vida del Fragment 


Añadimos el Fragment a la 
Activity 


onAttach() 


onCreate() 

:x: 


onCreateView() 


onActivityCreatedQ 

I 

onV¡ewStateRestored() 

I 


onStart() 


onResume() 



onDestroy() 

I 

onDetach() 

i 


El Fragment es destruido 


A continuación se muestra en detalle cómo funciona cada método: 
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Método 

¿Cuándo se llama? 

¿Qué debería hacer? 

onAttachO 

Justo después de adjuntar el 
Fragment a la Activity contenedora 

Mantener la instancia de los Callbacks y 
comprobar si la Activity contenedora los 
implementa 

onCreate() 

[Uso Recomendado] 

Al crearse el Fragment 

Aquí deberás inicializar los componentes 
esenciales del Fragment que quieras 
conservar cuando sea pausado o parado 

onCreateView() 

[Uso Recomendado] 

Llamado en el momento que se 
necesite pintar la interfaz del 
usuario por primera vez 

Asociar el diseño (un Layout.xml) al 
Fragment. Para pintar un interfaz de 
usuario para tu Fragment, tienes que 
devolver una View en este método que 
será la raíz del Layout de tu Fragment. Si 
el Fragment no tiene interfaz gráfica o se 
devuelve un nuil o con no sobrescribir 
este método vale. 

onActivityCreated() 

Justo después de completarse el 
onCreate de la Activity contenedora 

Por ejemplo, recuperar Views, restaurar 
estados, retener instancias para los 
callbacks, etc 

onViewStateRestored() 

Cuanto se restaura todo el estado 
que había sido guardado en la 
jerarquía de las Views del Fragment 

Para inicializar el Fragment en función de 
ciertos datos guardados que un estado 

onStart() 

Al hacerse visible para el usuario 

(Unido al onStar() de la Activity 
contenedora) 

onResumeO 

Al comenzar la iteración con el 
usuario 

(Unido al onResumeO de la Activity 
contenedora) 

onPause() 

[Uso Recomendado] 

Se llama con la primera indicación 
de que el usuario abandona el 
Fragment (no siempre significa que 
el Fragment esté siendo destruido) 

(Unido al onPause() de la Activity 
contenedora) 

onStop() 

Al no ser visible para el usuario 

(Unido al onStop() de la Activity 
contenedora) 

onDestroyV¡ew() 

Cuando la View que fue 
previamente creada con 
onCreateViewQ sea desajuntada del 
Fragment 

Limpiar las Views asociadas al Fragment 
(Las referencias que puedan evitar 
limpiar estas Views) 

onDestroyO 

Cuando ya no se va a utilizar 

Liberar sus recursos y limpiar su estado 

onDetachQ 

Justo antes de que el Fragment deje 
de estar asociado a su Activity 

Cambiar la instancia de los Callbacks a 
unos vacíos y controlados 


¿Qué es una Activity contenedora? 


Una Activity contenedora es la Activity que contiene uno o más Fragments. 

En una aplicación puede haber varias Activities contenedoras. Y un mismo 
Fragment puede estar sobre varias Activities contenedoras. 

Recuerdo que un Fragment siempre tiene que estar sobre un Activity, por 
lo que todo Fragment tendrá al menos una Activity contenedora. 

Cada hueco reservado para un Fragment sobre una Activity contenedora 
podrá contener a la vez un único Fragment. Si es estático, definido en el 

diseño de la Activity contenedora como <Fragment/>, no se podrá intercambiar por otro Fragment. Si es 
dinámico, definido en el diseño por algún ViewGroup, como <FrameLayout/>, desde Java podrá sustituirse un 
Fragment por otro 



Fragment 

Fragment 

Fragment 

Activity Contenedora 


www.Jarroba.com 


58 





















Ciclo de vida del Fragment vinculado con el ciclo de vida de la Activity contenedora 


Estados del Fragment que 
coinciden con los de Activity 

O Reanudado (Resumed): Fragment 
visible 

O Pausado (Paused): Otra Activity se 
ha puesto en primer plano y ha 
sombreado o se ve parcielmente la 
Activity contenedora del Fragment 
O Detenido (Stopped): El Fragment 
no es visible, pero su estado e 
información están retenidos por 
Android. Se puede deber a que la 
Activity contenedora se haya 
detenido o que el Fragment se haya 
eliminado pero añadido a la pila de 
atrás. El Fragment será matado si lo 
es la Activity contenedora 



Ciclo de vida de la 
Activity conetenedora 


Ciclo de vida del 
Fragment 


Creado onCreateO onAttachQ 

i 

onCreate() 

I 

onCreateView() 

I 

onActivityCreated() 

Iniciado onStartQ onStartQ 

I I 

Reanudado onResumeQ onResumeQ 

' l lllllllllllllllllllllllllllllllllllllllllllllllli^illlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll!i^lllllllllllllllllllllllllllllllllllllllll r 

Pausado onPauseQ onPauseQ 

’MiiiiiiiiiHiiiiiiiiiiiiiiiiiiiniiiiiiiiiiiiiii^iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiniiiiiiiiiiiiiiiiit^iiiiiiiiniiiMnmiiiniiiiiiiiiiiiiiii 1, 


Detenido 


Destruido 


onStop() 

onDestroy() 


''llllllllllllllilllllllllllllllilllllllllllllllllwllllll IIII lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll II IINIIIIIIIIMIfi II111111111111111111111111111111111111111' 


Métodos coordinados con el ciclo 

de vida de la Activity contenedora 

O onAttach(): cuando el Fragment se 
asocia a la Activity contenedora 
O onCreateView(): Al crear la 
jerarquía de Views asociada al 
Fragment 

O onActivityCreated(): al acabar de ejecutarse el método onCreateO de la Activity contenedora 
O onDestroyView(): cuando se elimina la jerarquía de Views asociada al Fragment 
O onDetachQ: en el momento en que el Fragment se desasocia de la Activity contenedora 


onStop() 
ii^ii 

onDestroyView() 

I 

onDestroy() 

I 

onDetachQ 


Se podrá eliminar y añadir Fragments libremente cuando nos encontremos en el estado de Reanudado de la Activity 
contenedora 
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Ejemplo Fragment 


Lo que haremos 

Crearemos otro nuevo proyecto, pero esta vez será de tipo “Blank Activity”. Este nos genera la Activity con un 
Fragment y su diseño asociado. A continuación sustituiremos el código existente por el de este ejemplo. 

En la clase Java “MainActivity.java” sustituiremos el código que hay y crearemos otra que la llamaremos 
“PlaceholderFragment.java” (este nombre no es casual, es el nombre del Fragment que nos crea el ADT con el 
“HelloWord”; por cuestiones prácticas y de colocación de código preferimos colocarlo en una clase aparte). 


PlaceholderFragment.java 

MainActivity.java 


Veremos en el LogCat las trazas que se han puesto al arrancar el Fragment, y cuando salgamos de este 
(pulsando la tecla de atrás). 

Nota: Al igual que el anterior ejemplo, aquí solo nos queremos centrar en el ciclo de vida, esta vez de un 
Fragment. 



Ilustración 5 - Aunque esto será lo que veamos en pantalla, no nos Interesa en este ejemplo 


O Conso»* 

Saved Fifters + - 

Ai m«vag« (no Wt en) (1939) 
Test 


L_ Tvnc PIO TIO 

V 

V 

V 

V 

V 

V 

V 

V 

V 


tfi p«l. app U 9 or te*t to kmt tcopc. 

Application Tag 

co«. jarroba. fragaer.taciclolevila t*»t 

co*t.]*rrob«.fr*gaenc«cicloOevio* ten 

coaodrroba.fragaeataciclodevia* test 

coaoarroba.fragoentaciclodevida test 

co».} arroba. í ragner.taci el olevi la c**t 

cos.)*rroba.fragKatsciclo<Seviia test 

coaoarroba.fragaeataclcloóevila test 

co». jarroba. f ragjseatscicloleviia te»: 

co».3arroba.fragnentacicloleviia t»»t 


To* 


oaAccach 

ooCrcatc 

onCreateView 

oaActlvicyCreateü 

onVtewStateReatorel 

onScarc 

oaAesuae 


Al arrancar 
la App 


^nTarraT 

l a App 


or.Pauae 

oaStop 


Ilustración 6 - Ejecutaremos la 


aplicación y al salir de ella nos mostrará en el Log el recorrido del ciclo de vida del Fragment. Aunque es parecido 
al ciclo de vida de Activity , no es igual, pero sí está emparejado 
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Proyecto 


a ¿5? FragmentsCicloDeVida 
á Q 3 ^rc 

CQm.jarroba.iragmentEcidodeyid a 

I [Jj MainActivity.java 

[: | [ 7 ] PlaceholderFragment.java 
[> fe ger^jene^recnav^NTe^^^^^ 
t> SÉk Android 4.4,2 
t> Ek Android Prívate Librarles 
fe assets 
[> fe bin 
t> fe libs 
[> fe res 

G ÁndroidManifest.xml 
[Sil ic_launcher-web,png 
[§] proguard-projectbít 
§] project.properties 
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@Override 

public void onActivityCreated(Bundle savedlnstanceState) { 
super .onActivityCreated(savedlnstanceState) ; 

Log. v (LOG_TAG, "onActivityCreated”) ; 

} 

@Override 

public void onViewStateRestored(Bundle savedlnstanceState) { 
super .onViewStateRestored(savedlnstanceState) ; 

Log. v(LOG_TAG, "onViewStateRestored") ; 

} 

@Override 

public void onStart() { 

super .onStart() ; 

Log. v (LOG_TAG, "onStart"); 

} 

@Override 

public void onResume() { 

super .onResume() ; 

Log. v(LOG_TAG, "onResume") ; 

} 

@Override 

public void onPause() { 

super .onPause() ; 

Log. v (LOG_TAG, "onPause") ; 

} 

@Override 

public void onStopO { 
super .onStop() ; 

Log. v ( LOG_TAG , "onStop"); 

} 

@Override 

public void onDestroyView() { 

super .onDestroyView(); 

Log.v (LOG_TAG, "onDestroyView") ; 

} 

@Override 

public void onDestroyO { 
super .onDestroy() ; 

Log. v(LOG_TAG, "onDestroy"); 

} 

@Override 

public void onDetach() { 
super .onDetach() ; 

Log. v(LOG_TAG, "onDetach"); 

} 
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Vistazo a los diseños 


Diseñar generalmente en Android 

¿Hay temas que pueda reutilizar en Android? 

Existen dos que podemos reutilizar y modificar a nuestro gusto: 

O Holo Light 


m Inbox 

xyi xyz$*rtdrotd com ^ 

2011 Holiday Gift Team 1 

D Ciumboy echo pork four loko musite he Hit. 
wtyUrcrs l^mgs misttf citante incidtdunt 

Larry Page )6 

0 NuOa bruñeh cxccptcur, irurc vemam bk>g 
sint squid Consequat pariatur keytar con* 

Owen, me. Amy 7 < m > d*c te 

0 Helvética occaecat 3 wolf moon whatevcr vo 
luptate fap Salvia etuimod pitchfork. 3 wolf 

Taddeo ■*!»■ 

Q Drcamcatchcr artitan btodicsH. commodo 
gluten irte salvia helvética aliqurp photo 

Hiroshi Lockheimer 

0 Brunch cred wolf art party. you probabfy 
haven't heard of them et officia mustache lo* 

Amy, Kenzo, Zi 3 16 

0 Food truck reprehenderit elrt en»m, 8 *bit 
tingle or»gin coffee butcher ethxcal gluten* 


me. Román 5 

Cred fule culpa, hoodie adiptticing tkate 


O Holo Dark 


E Settings 

WIRELESS & NETWORKS 

▼ Wi-Fi 

wm 

0 Bluetooth 

m 

0 Data usage 


More... 


DEVICE 


41* Sound 


€> Display 


is Storage 


B Battery 


□ Apps 


B. Q, 


C 


¿Qué Feedback puedo dar al usuario? 

O Usar el color y la iluminación: Jugamos con el 
color u la iluminación para indicar al usuario que ha 
pulsado o que está pulsado algo. 

O Comunicación: Jugando con el color, degradados, animaciones y formas, 
indicaremos al usuario lo que su acción va a provocar (como al empujar con el 
dedo un elemento de un listado fuera de la pantalla, se transparente para 
indicar al usuario que se va a eliminar el elemento). 


*~=) 1ZZI 
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O Estados: Definiremos estados (color, forma, sonidos, etc) para indicar al 
usuario como se encuentra el elemento en ese momento. Por ejemplo, los 
estados de los botones. 



O Límites: Indicaremos al usuario que existe un límite (fin 
o principio de un listado o de escritorio, al tirar se 
descargarán más datos, etc) con alguna animación o 
efecto. 


Normal 


Pressed 


Focused 


¿A qué tendremos que atender con los estilos? 

O A la flexibilidad, por adaptar 
los diseños a las diferentes 
pantallas 

O Al optimizar los diseños, para 
aprovechar el tamaño y la forma 
de las pantallas, variando las 
vistas para revelar más o menos 
contenido y facilitar la 
navegación 

O Al proporcionar recursos para 





íOLIBRÍ 



Los fenicopteriformes (Phoemcoptenformes). los cuales reciben el nombre vulgar de flamencos, son un 
orden de aves neognatas. con un único genero viviente: Phoemcopterus Son aves que se distribuyen tamo 
por el hemisferio occidental como pot el hemisltno oriental existen cuatro especies en America y dos en 
el Viejo Mundo Tienen cráneo desmognato holomno.con 16 a 20 vértebras cervicales y pies anisodactilos 


% 

f* 

rvivvi 

LORO 



o c: 

i en 

230^^1 1 

1 


todos, al disponer de imágenes para todos los tamaños y densidades 


Referencias: 

O http://developer.android.com/design/stvle/index.html 
O http://developer.android.com/guide/practices/screens support.html 
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Métricas y Cuadrículas 

¿Cuáles son las unidades de medida en Android? ¿Cuáles se recomiendan utilizar? 

Echa un vistazo a la siguiente tabla y lee el siguiente párrafo. 


Nombre 

Abreviatura 

Equivalencia 

Píxeles independientes de la densidad 
(Densisty-independent Pixels) 

dp 

1 dp = 1 pixel en una pantalla de 160 dpi (mdpi) 

Píxeles independientes de la escala 
(Scale-independent Pixels) 

sp 

1 sp = 1 dp * preferencias del tamaño del usuario 

Puntos 

Pt 

1 pt = 1/72 de pulgada 

Pixeles 

px 

1 px = 1 pixel de la pantalla 

Milímetros 

mm 

1 mm = 1 milímetro 

Pulgadas (Inches) 

in 

1 in = 1 pulgada = 25,4 mm 


Android soporta píxeles, milímetros, pulgadas y puntos, que están muy bien pero solo serían útiles si solo 
existiera una única pantalla en todo el mundo. Se puede decir que para los desarrolladores no existen (salvo en 
casos tremendamente concretos; y con su uso quedarían fuera casi todas las pantallas del mundo al no 
adaptarse correctamente lo que ve el usuario a los diferentes tipos de pantallas). 

Surgió la necesidad de crear los Píxeles independientes de la densidad (dp). Por lo que recomiendo, más bien, 
verás que es la única manera de que quede bien todos los diseños en todas las pantallas existentes, usar los dp 

para las Views. 

Sin embargo, para los textos se recomienda utilizar Píxeles independientes de la escala (sp). Al utilizar sp para 
los textos se ofrece al usuario la oportunidad de cambiar el tamaño del texto desde los ajustes del dispositivo. 
También, se puede decir que es obligatorio utilizarlas, ya que una persona con dificultad en la visión no podría 
leer nuestra aplicación si utilizamos dp, por ello para textos utilizaremos sp. 


¿Qué tamaños dan nombre general a los dispositivos? 


PHONE 


TABLET 


— 320DP — 


— 360DP — 


962DP 


1280DP 


Veremos más en el tema de Diseño (tema en el que 
programaremos, este de teoría es 
para ir teniendo una idea rápida 
de principios de Android). Pero en 
términos generales son: 


O Handset (cabe en una mano, 
como un SmartPhone, un GPS, 
etc): igual o menos de 600 dp 


O Tablet (no cabe en una sola mano): mayor que 600 dp 


¿Qué densidades existen? 

También las veremos más profundamente en el tema de Diseño. En Android las 
clasificaremos en: 

O XXXHDPI: densidad alta nivel 4 
O XXHDPI: densidad alta nivel 3 
O XHDPI: densidad alta nivel 2 
O HDPI: densidad alta nivel 1 
O MDPI: densidad media 
O LDPI: densidad baja 


\¿3 src 


src 

gen [Generated Java Files] 

a& Android 4.3 
9^ Android Prívate Libraries 
& assets 

> ¡¿-3 bin 

> & libs 

i res _ 


s & drawable-hdpi 

fe, ¡cjauncher.png 
a ¿3 drawable-ldpi 

fe ¡cjauncher.png 
a & drawable-mdpi 

fe ¡cjauncher.png 
a (¿3 drawable-xhdpi 

fe ¡cjauncher.png 
a (¿3 drawable-xxhdpi 
fe, ¡cjauncher.png 


> & menú 
t> (¿3 valúes 

t> G3 values-sw600dp 

> G3 values-sw720dp-land 
t> Q3 values-vll 

> £3 values-v14 

[o¡ AndroidManifestxml 
fe, icjauncher-web.png 
U) proguard-project.txt 
i project.properties 
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¿Cómo creo los tamaños y las densidades de las imágenes? 



Sencillo, crea una imagen, comprueba que no se aplasta o estira demasiado en una 
pantalla de 160dpi al utilizarla en la carpeta “mdpi” (que es la medida base) y 
teniendo ésta de referencia crea las demás. 

Todas las imágenes con el mismo nombre, irán cada una en una carpeta “drawable” 
con el sufijo correspondiente (aprende más sobre sufijos en el tema de Recursos). 


Nombre 


Proporción 
(ratio de 
escala) 


Densidad 


Tamaño de 
ejemplo del 
icono 

“ic launcher” 


Icono de ejemplo de tamaño 
proporcional 


xxxhdpi 


4x 


640 dpi 


192 x192 


xxhdpi 


3x 


480 dpi 


144 x144 


xhdpi 


2x 


320 dpi 


96x96 


hdpi 


l,5x 


240 dpi 


72x72 


mdpi 


lx 


160 dpi 


48x48 


Idpi 


0,75x 


120 dpi 


36x36 
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¿Cuál es la proporción general de todas las Views en Android? 


La proporción general de todas las Views será de 48 dp 
(aproximadamente 9mm). 


4DP 



Con esta proporción: 


O Aseguraremos que las cosas no sean 
demasiado pequeñas (menos de 7mm), 
independientemente de la pantalla 
O Guardaremos el equilibrio entre la 

información general, y el objetivo de los 
elementos de la interfaz de usuario 




16 


SECTION 


Hinttext 


Hinttext 


SECTION 


Dec 25, 2011 


< 8:00am 


A 

. f . ...A 

Hinttext 


Send 





SECTION 


Hint text 


Hint text 

SECTION 

Dec 25, 2011 

8:00am 

A A 

Hinttext 

Send 


Tipografía 

¿Qué tipografías se incluyen en Android? 

La tipografía Roboto. Se puede descargar desde: 
http://developer.android.com/design/stvle/tvpographv.html 


Roboto 

SUNGLASSES 


¿Qué tipos Incluye la tipografía Roboto? 

Tipos incluidos: final, ligera, normal y negrita (y cursiva para 
cada una) 


¿Puedo utilizar la tipografía Roboto para otras cosas que no 
sean Android? 

Al contrario que otros elementos de Google que pueden ser más 
libres, la tipografía Roboto está protegida por una licencia 
Apache que limita su uso (se encuentra dentro del fichero que 
contiene la tipografía) 


Self-dríving robot ¡ce cream truck 

Fudgesicles only 250 

ICE CREAM 

Marshmallows & almonds 

#9876543210 

Music around the block 

Summer heat rising up from the sidewalk 


Text Size Micro 


¿Qué unidad de medida se recomienda utilizar para textos? 


Text Size Small 

Text Size Médium 

Text Size Large 


El sp, como ya se mencionó. Principalmente porque el sistema -previa 
petición del usuario- puede variar el tamaño de todo lo que declare el 
formato sp. 


Referencias: 

O http://developer.android.com/design/stvle/tvpographv.html 
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Color 


¿Para qué se pude utilizar el color? 

Usar el color para dar énfasis 


#33B5E5 

#AA66CC 

#99CC00 

#FFBB33 

#FF4444 

#0099CC 

#9933CC 

#669900 

#FF8800 

#CCOOOO 


¿Qué color elegir? 

Seleccionar los colores que mejor se ajustan a su marca y ofrecen un buen contraste entre los componentes 
visuales. 


¿Todos los colores se ven bien juntos? 

Algunos como el rojo con el azul provocan mareos. 

También, indicar que el rojo y el verde no son distinguibles para usuarios daltónicos. 


¿Qué notación utilizar para los colores? 

El formato RGB (rojo verde azul) es el más recomendado. O su variación más completa el ARGB (alfa rojo verde 
azul). Siempre en hexadecimal. Se puede usar hexadecimal (como base el número 16, es decir 16 dígitos que 
van desde el 0 al F) de un dígito (#ARGB) o de dos dígitos (#AARRGGBB). 

Es recomendable usar la notación de color #AARRGGBB. Cuyo valor mínimo es el #00000000 y el máximo es 
#FFFFFFFF. Si no se pone AA se considera que está a su máximo valor (FF), que equivale a completamente 
opaco. 


Referencias: 

O http://developer.android.com/design/stvle/color.html 
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Iconografía 


¿Cuántas veces en diferentes densidades tengo que 
diseñar una imagen para mi aplicación? 

A menos que no permitamos que se instale en más de un 
tipo de pantalla de unas características determinadas 
(cosa para nada recomendable), tendremos que diseñar 
más de uno. 


1x 1.5x 2x 3x 4x 



MDPI HDPI XHDPI XXHDPI XXXHDPI 

-160 DPI -240 DPI -320 DPI -480 DPI -640 DPI 


Como vimos anteriormente (ver en este mismo tema en “Métricas y cuadrículas” para ver los ratios de escala), 
las posibilidades en pantalla son infantas, por lo que es más que interesante diseñar un icono para cada una de 
las densidades de pantalla. Para simplificar será suficiente con diseñar los iconos para las carpetas “drawable” 
que nos recomienda Android. 


Un truco es que no hace falta diseñar todas las densidades, ya que si el tamaño en dpi al dividirlo entre 2 
coincide con la escala de una carpeta “drawable”, Android puede escalar la imagen sin perder nada de 
eficiencia; por ejemplo, un icono en “drawable-hdpi” de 240dp¡ Android lo escala sin inmutarse a 120dp¡, razón 
por la que no se suele utilizar la carpeta de “drawable-ldpi”. Este truco puede que de la excusa de diseñar un 
único icono para la carpeta de “drawable-xxxhdpi” y que Android lo escale para el resto, pero esto no es óptimo, 
Android tardaría un montón de tiempo en escalarla. 


¿Cómo se recomienda diseñar los iconos que lanzan la aplicación? 


El dibujo se recomienda que sea la representación 
básica de la aplicación. Por ejemplo, un sobre 
indicaría que es un gestor de correo. 


EÉ Q 




Para dispositivos debe ser de 48x48dp y para la web de Google Play de 512x512 pixeles. Recuerdo que existe la 
posibilidad de utilizar el asistente de crear un nuevo proyecto Android para que nos genere todos los iconos 
necesarios de manera automática (todos los necesarios, incluido el de la web Google Play). 


El diseño actual sigue una tendencia de iconos tridimensionales con el punto de mira desde un poco por arriba 
para percibir profundidad. Además, los iconos son redondeados, jugando con sombras y brillos. 


¿Cómo diseño los iconos del ActionBar? 

Deben de ser simples metáforas que representen conceptos que la mayoría de la 
gente pueda entender de un vistazo. 

Lo mejor es utilizar los iconos que ya están por defecto en la API de Android, ya que son 
los símbolos que todo usuario ya ha visto alguna vez. Además, se adaptan a la versión 
del sistema operativo y a las diferentes pantallas. 

El tamaño del marco de los iconos debería de ser de 32x32dp, situando a la imagen en 
el medio con un tamaño de 24x24dp. El estilo tiene que ser pictográfico, plano, con suaves curvas y sin muchos 
detalles; hay que intentar llenar el cuadro de 24x24dp, y que ninguna línea tenga un grosor menor que 2dp. 

También hay que estar pendientes de los temas del sistema operativo, ya que tiene dos y hay que diseñar 
imágenes para ambos: 



m 



O Holo Light: El color de fondo de #333333, la opacidad cuando está 
habilitado ha de ser de 60% y para cuando está deshabilitado de 30% 

O Holo Dark: El color de fondo de # FFFFFF, la opacidad cuando está 
habilitado ha de ser de 80% y para cuando está deshabilitado de 30% 
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¿Cómo diseño los ¡conos acción, de estado y de menú contextual? 


Dec 16 


Por ejemplo el icono de marcar como favorito. 


liesel, commodo 
aliquip photo 


Dec 16 

you probably 
ficia mustache lo- 


El tamaño del marco que sea de 16xl6dp, y el 
de la imagen central de 12xl2dp. De estilos 
parecidos a los de la ActionBar; de estilo 
natural, plano y simple, de colores que 
contrasten, eligiendo las metáforas visuales 
que mejor entienda y recuerde el usuario. 



¿Cómo diseño los de las notificaciones? 

Un ¡cono que aparecerá en la notificación en la 
barra de estado (la barra que tiene el reloj y la 
batería del móvil). 

El tamaño del marco debería de ser de 24x24dp, 
siendo el dibujo de 22x22dp. Y el estilo que sea 
liso y simple, utilizando la misma metáfora que el 
icono que lanza la aplicación (para indicar al usuario que esa notificación es de tu 
aplicación), y de color blanco. 


ú 

Kid Mode 

SwWtsafully iAMdJkú 

2:2$ Plu 

V 

Missed cali 

2:2? PM 

i - * 

(8M) 1112 


ral 

S n*w messagcs 

1 2.10 PM 

test.hug&í^mail.Mm 

s w 



Referencias: 

O http://developer.android.com/design/stvle/iconographv.html 
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Diseña tu propia marca 

¿Tienen que ser todas las aplicaciones iguales? 

Seguir la guía de estilo de Android no significa que todas las 
aplicaciones se tengan que ver iguales 


¿Qué puedo cambiar? 

Casi todos los estilos e imágenes como: Logo, nombre y colores de 
la Action Bar, fondo, estilo de texto, etc 


4:40 


= HowzAbout 



Fiesta del Toro 


Your rating: 

¡df£g 



Durban 


Your rating: 




¿Tienen que ser los iconos de los botones obligatoriamente iguales? 


’M’ 



* 


No, hay unos recomendados, pero se puede aplicar un diseño propio. 
De este modo se pueden hacer iconos que se ajusten con nuestra 
marca o estilo. 


Lo único que hay que cumplir, 
que estos iconos tengan la misma representación de la metáfora de 
Android. Por ejemplo, si queremos diseñar el icono de compartir que 
sean los 3 puntos unidos, no una flecha u otra metáfora. 


Mal ,jv Bien 


Referencias: 

O http://developer.android.com/design/stvle/branding.html 
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Consejos para los textos 

¿Qué consejos me puedes dar para escribir los textos de una aplicación? 

O Brevedad: Conciso, simple y preciso. Se recomienda que el límite sean 30 caracteres 

O Sencillez: Palabras cortas, verbos sencillos y nombres comunes. Es decir, escribir para gente que no 
entienda bien el idioma o se estén iniciando en el mismo 

O Amigable: Usar contracciones. Hable con cortesía y directamente al lector en segunda persona del 
singular (tutear o formalmente con tratamiento de usted). Que el texto transmita al usuario seguridad, 
alegría y energía 

O Poner primero lo más Importante: Las primeras 2 palabras deberían incluir una muestra de la 
información más importante 

O Describir solo lo necesario: No tratar de describir sutilezas, pues pierden a los usuarios 

O Evitar la repetición: Que no se repitan los términos, aunque estén escritos con diferentes palabras, más 
de una vez 


Ejemplo de texto mal escrito 

¿Por qué está mal el 
ejemplo de la izquierda? 

Ejemplo de texto mejor escrito 

Consulte la documentación que viene 
con su teléfono para disponer de 
instrucciones adicionales 

Demasiado formal y largo 

Lea las instrucciones que vienen con 
su teléfono 

Pulse siguiente para completar la 
instalación usando una conexión Wi-Fi 

Por estar la información 
importante en último lugar 

Para terminar la instalación usando 
Wi-Fi, pulse siguiente 


Referencias: 

O http://developer.android.com/design/stvle/writing.html 
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Res (Resources, Recursos) 


Carpeta “res” 

¿Dónde se encuentran los recursos? 

Todos los recursos se encuentran en la carpeta “res” (que viene de las tres primeras letras de la palabra 
recursos en inglés “resources”), clasificados en carpetas con un nombre específico y posiblemente con sufijos. 


¿Qué puede contener la carpeta “res”? 

La carpeta de recursos contendrá las imágenes como iconos o logos, los textos en uno o varios idiomas, las 
dimensiones, los estilos, colores, animaciones, entre otras cosas que sean siempre finales y que no vayan a 
cambiar a lo largo del programa. 

Todo lo introducido en esta carpeta será optimizado automáticamente. Esto quiere decir que, por ejemplo, una 
imagen posiblemente no tendrá el tamaño, formato o resolución original. 


¿Puedo poner cualquier nombre a las carpetas? 

No se puede poner cualquier nombre a las carpetas dentro de “res”, han de seguir una estructura 

¿Qué estructura de carpetas sigue la carpeta “res”? 

■■ . La estructura interna de esta carpeta es (iremos usándolas con ejemplos según 

avancemos en contenido en el libro): 

1. anlmator: XML con propiedades de las animaciones (ejemplo: tiempo de 
interpolación) 

2. anlm: XML con los estados visuales de las animaciones (ejemplo: que el objeto 
animado empiece el pequeño y acabe grande) 

3. color: XML con la lista de colores en #RGB, #ARGB, #RRGGBB o #AARRGGBB 

4. drawable: imágenes (.png, .9.png, .jpg, .gif), o XML que definan imágenes 

5. Layout: XML con la interfaz de usuario 

6. menú: XML con los menús 

7. raw: cualquier tipo de fichero (ejemplo: audios) 

8. valúes: XML múltiples de valores simples (ejemplos: textos, enteros, arrays, etc). Se han estandarizado: 
arrays.xml, colors.xml, dimens.xml, strings.xml, styles.xml) 

9. xml: XML arbitrarios que pueden ser leídos en tiempo de ejecución 

¿Puedo poner cualquier nombre a los ficheros de los recursos? 
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No, están definidos y no se pueden poner otros nombres. 

Todos los ficheros de recurso han de ir en minúscula, sin caracteres extraños (salvo guión bajo o dólar “$”) y 
sin espacios. Ejemplo: “mijmagen.png” o “mi_fichero.xml” 

Dicho de otro modo, los nombres de los recursos deben ser escritos como si escribiéramos variables en Java 
(pero todo en minúsculas) seguido de la extensión (“.xml”, “.png”, etc). Esto es así, porque sus nombres van a 
ser recogidas por el fichero “R.java” y convertidas en variables. 


¿Cómo añado un recurso que NO sea XML? 

Por ejemplo, puedes añadir imágenes en formato PNG para crear los iconos de la aplicación. Es tan sencillo 
como arrastrar el recurso a la carpeta correspondiente. Para una imagen que tengamos en el escritorio de 
nuestro ordenador, la arrastraremos desde el escritorio a dentro de Eclipse, hasta la carpeta de prefijo 
“drawable” que vayamos a necesitar. 


¿Cómo se crea un nuevo recurso XML? 


Si creamos un nuevo recurso XML para un tipo de configuración de dispositivo determinado, el ADT nos 
generará automáticamente la carpeta (si no existe) para guardar ahí el recurso. 


Navigate Seal 


0 ^ 


Se hace de una manera muy sencilla. Podemos pulsar en la barra de tareas el icono de una 
“a” con un símbolo de suma en amarillo. 

O podemos pulsar con el botón derecho del ratón sobre la carpeta del proyecto (o sobre la 
carpeta “res” también vale, por si lo ves más natural, aunque da igual) en el que queramos crear un nuevo 
recurso eirá “New/Android XML File”. 


üi 






>1 

l [^7 Android Application Project 

O src 

> §3 gen [G 

Go Into 


1 

■ kr Java Project 

S Í Andró 

> Andró 

as sets 
m . . 

Open in NewWindow 


Project... 

Open Type Hierarchy 

H | 

Hcjí Android XML File 

C l-i ri-itít 1 r. 

A l-F J. C ln ¡f-F J. 1AJ b 



www.Jarroba.com 


74 















En la ventana que se abre llamada “New Android XML File” definiremos el tipo de recurso XML que crearemos 
con: 


O Resource Type (Tipo de recurso): elegiremos el tipo de recurso que queramos crear, existen varios. Estos 
son: 


Recurso 

Traducción 

Carpeta 

Descripción 

Layout 

Diseño 

layout 

Un fichero de diseño de qué es lo que verá el usuario en la 
pantalla 

Valúes 

Valores 

valúes 

Valores varios como estilos, dimensiones, strings, arrays, etc. 

Drawable 

Dibujables 

drawable 

Cualquier imagen que definamos mediante XML 

Menú 

Menú 

menú 

Elementos de los menús o de la barra de acciones (ActionBar) 

Color List 

Lista de colores 

color 

Para guardar toda nuestra paleta de colores en hexadecimal 

Property 

Propiedad de la 

animator 

Define propiedades de una animación. Como las veces que se 

Anlmatlon 

animación 

tiene que repetir una animación, la duración, etc 

Tween 

Anlmatlon 

Interpolación de 
la animación 

anim 

Define las interpolaciones de las animaciones, como si un objeto 
tiene que rotar, moverse de un punto a otro, etc 

AppWIdget 

Provider 

Proveedor del 
AppWidget 

xml 

Cuando creemos un AppWidget de escritorio tendremos que 
declarar aquí sus propiedades, tales como el tiempo de refresco, 
el diseño que tendrá, etc 

Preference 

Preferencias 

xml 

Para crear los Activities (PreferenceActivity) o Fragments 
(PreferenceFragment) de preferencias de usuario 

Searchable 

Buscable 

xml 

Para en los campos de búsqueda activar el autocompletar, entre 
otras cosas 


O Project (Proyecto): Seguramente ya esté elegido 
si lo hemos seleccionado previamente. 

O File (Fichero): Nombre del fichero que 

crearemos (no hace falta ponerle la extensión 
XML). 

O Root Element (Elemento Raíz): El elemento que 
definirá la raíz de nuestro fichero XML. 
Dependerá del tipo de recurso que hayamos 
seleccionado. 

Por ejemplo, en la imagen adyacente crearemos un 
fichero de diseño para nuestro proyecto, que 
llamaremos “fichero_disenio” y que su elemento raíz 
sea un <LinearLayout>. 

Pulsaremos el botón de “Next >” que nos conducirá a 
una nueva ventana. Pero antes la explicaremos. 
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¿Cómo funciona lo de los sufijos en las carpetas de recursos? 

Las carpetas de recurso pueden tener sufijos que indicarán a Android que recursos usar en cada momento. 
Momentos como la orientación del dispositivo, el idioma, el tamaño de la pantalla, la versión de Android, etc. Por 
ejemplo: drawable-hdpi (hdpi indica que son imágenes para pantallas de alta resolución) o “values-sw720dp- 
land” (“sw720dp” indica que esa carpeta está dirigida a pantallas de más de 720xl280dp, es decir, tablets de 
10 pulgadas; y “land” indica que solo para cuando está la pantalla en horizontal). 

Creamos una nueva carpeta dentro de la carpeta “res”. En el campo de nombre de la carpeta la llamamos 
“layout-” seguido de un sufijo de los anteriores. Por ejemplo, podemos crear: “layout-land”, “layout- swl23dp”, 
“layout-large”, entre otras. Veremos cómo se hace esto en las siguientes preguntas. 

Existen ciertos sufijos que se pueden combinar, como por ejemplo “layout-large-land”. 

Veremos una explicación más profunda sobre sufijos en carpetas en el tema de “Diseños”. Aunque funciona 
para todas las carpetas de recursos de manera similar. 


¿Cuáles son los sufijos para las carpetas de recursos? 

Existen varias maneras de clasificar los recursos, unos más nuevos que otros. Aunque funcionan todos, se 
recomienda utilizar los nuevos. 

O Sufijos para diferentes pantallas: 

O Sufijos antiguos (obsoletos): Por ejemplo “layout-large-land”, indicará que solo tomará los recursos 
de esta carpeta si el dispositivo donde se ejecuta tiene una pantalla grande, y se encuentra en 
posición horizontal. 


Tipo 

Sufijo 

Recursos de diseño para: 


small 

Pantallas pequeñas (obsoleto) 

Tamaño 

normal 

Pantallas normales 

large 

Pantallas grandes 


xlarge 

Pantallas muy grandes 


Idpi 

Densidad baja, unos 120 dpi 


mdpi 

Densidad media, unos 160 dpi. Es la base de todas las medidas. 


hdpi 

Densidad alta, unos 320 dpi 

Densidad 

xhdpi 

Densidad muy alta 


xxhdpi 

Densidad mucho más alta 


nodpi 

Todas las densidades. Android no modificará el tamaño de estos recursos. 


tvdpi 

Densidad media-alta, unos 213 dpi (obsoleto) 

Orientación 

land 

Posición horizontal o apaisado (landscape) 

port 

Posición vertical (portrait) 

Relación de 

long 

Pantallas muy largas 

aspecto 

(Aspect ratio) 

notlong 

Pantallas de aspecto similar al de base (el tipo de pantallas mayoritario) 
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O Sufijos nuevos (cubren todas las posibilidades de los sufijos antiguos): Por ejemplo, si queremos que 
solo utilicen unos recursos lasTablets, usaremos “Iayout-w820dp”. 


Nombre 

Fromación del sufijo 

Sufijo de 
ejemplo 

Recursos de diseño para: 

Ancho más 
pequeño 

sw + (n° entero) + dp 

swl23dp 

Anchuras de pantalla que no sean menores al tamaño indicado, 
independiente de la orientación del dispositivo; es decir, que si el 
dispositivo está en posición horizontal, se tomará como anchura la 
altura (aquí se interpreta la anchura como la longitud más 
estrecha). Esta es la alternativa a los tamaños anteriores (small, 
normal, large, xlarge) 

Anchura 
de pantalla 
disponible 

w + (n° entero) + dp 

w456dp 

Mínimo de anchura de la pantalla. Aquí la anchura es siempre la 
distancia entre el extremo de izquierda y el de derecha de la 
pantalla; por lo que cambiará al girar el dispositivo. 

Altura de 
pantalla 
disponible 

h + (n° entero) + dp 

h789dp 

Mínimo de altura de la pantalla. Aquí la altura es siempre la 
distancia entre el extremo superior y el inferior de la pantalla; por lo 
que cambiará al girar el dispositivo. 


Indicar que los sufijos antiguos se pueden combinar, como por ejemplo “layout-large-land”. Los nuevos no se 
pueden combinar, ya que no es necesario. 

O Sufijos de idioma: Por ejemplo, tendremos recursos de idiomas en español en la carpeta “values-es”, o 
en francés en la carpeta “values-fr”. Recomiendo poner el inglés en la carpeta “valúes” sin sufijo (de 
este modo, un dispositivo cuyo no esté recogido en las carpetas con sufijo, entrará en ésta). 


Idioma 

Sufijo 

(Idioma por defecto) 

(Si no ponemos sufijo, se tomará por defecto esta carpeta de no encontrarse 
alguna del idioma adecuado. Recomiendo que el idioma por defecto sea el 

inglés) 

Inglés 

en 

Español 

es 

Portugués 

pt 

Indio (Hindi) 

hi 

Árabe 

ar 

Chino 

zh 

Francés 

fr 

Alemán 

de 

Italiano 

it 

Japonés 

ja 

Coreano 

ko 


O Sufijos de versión de Android: Por ejemplo, si creamos una carpeta llamada vl4 significará que solo 
entrará, si la aplicación se ejecuta en un dispositivo que tenga como mínimo la versión 4.0 de Android. 


Nombre Android 

Versión Android 

API 

Sufijo correspondiente 

Cupcake 

1.5 

3 

v3 

Donut 

1.6 

4 

v4 

Eclair 

2.0/2.1 

7 

v7 

Froyo 

2.2 

8 

v8 

Gingerbread 

2.3.2/2.3.7 

9/10 

v9/vl0 

Honeycomb 

3.0/3.1/3.2 

11/12/13 

vll/vl2/vl3 

Ice Cream Sandwich 

4.0/4.0.3 

14/15 

vl4/vl5 

Jelly Bean 

4.1.2/4.2.2/4.3 

16/17/18 

vl6/vl7/vl8 

KitKat 

4.4/4.4.3 

19 

vl9 
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¿Cómo creamos una nueva carpeta de recurso, y si queremos con un sufijo, de manera automática? 

Aunque se puede crear a mano y añadir el sufijo. Debido a que es imposible saberse todos, en este libro vamos 
a recomendar un truco que -pese a no estar muy extendido- es muy cómodo, útil y no querrás dejar de usarlo. 


Continuaremos desde la ventana que dejamos antes. 



Ya podremos pulsar el botón de “Finish”. 


Pulsaremos “Next >” para ir al siguiente paso donde 
elegiremos el tipo de configuración de la carpeta de recursos 
(Si no existe se creará). Es decir, en qué carpeta con qué 
prefijo se guardará el fichero. 

En este ejemplo, estamos creando un fichero de diseño que 
queremos que solo funcione para un tipo de pantalla de 
ancho mínimo de 820dp, para que solo sirva para Tablets. 

Por lo que elegiremos en el panel de la izquierda “Avaible 
Qualifiers” (Elementos que cualifican disponibles), el 
elemento “Screen Width”. Y pulsaremos la flecha de mandarlo 
a la derecha, a la columna “Chosen 
Qualifiers” (Elementos que 
cualifican elegidos). Aquí 
podremos especificar sus 
propiedades; en el caso de este 
ejemplo, pondremos 820 para 
indicar la anchura mínima en dp. 


t> £3 src 

> gen [Generated Java Files] 

> Andró id 4.4.2 

> ^ Android Prívate Librarles 
^3 assets 

> Ü3- bin 

> \¿3 Nbs 
J res 

> ¡23 drawable-hdpi 
23 drawable-ldpi 


Descubriremos en la estructura de nuestro proyecto Android, como efectivamente 
se nos habrá creado la carpeta con el sufijo y dentro nuestro fichero de diseño 
XML. En el ejemplo que hemos explicado veremos la carpeta “Iayout-w820dp” con 
el fichero que creamos “fichero_disenio.xml”. 



223 drawable-mdpi 
t> & drawable-xhdpi 
t> & drawable-xxhdpi 

ú & layout-wSZOdp 

G fichero d¡sen¡o.xml 


¿Cómo se crea una nueva carpeta de recurso de manera manula? 


Aunque recomiendo la manera automática, podría ser útil en ciertas ocasiones. 

Para crear una nueva carpeta en Eclipse para guardar nuestros recursos: elegir la carpeta “res” con el botón 
derecho del ratón. Ahí pulsar en elegimos “New” y luego “Folder”. Se abrirá una nueva ventana en al que 
pondremos el nombre de la nueva carpeta de recursos, por ejemplo “Iayout-w820dp”. 

En la imagen de ejemplo se muestran las carpetas que se generan de manera automática al crear un proyecto 
nuevo. El resto que se mencionan aquí, si se necesitan utilizar habrá que crearlas a mano. 


> & src 

> ge 


t> An 
t> EftAn 


Open in New Window 
Show In 


> bir 



& 

t> & 
t> & 
[> & 
t> & 
[> & 
o & 
[> & 


HÉ Copy 

|§¡ Copy Qualified Ñame 
Paste 
X Delete 

Removefrom Context 
Build Path 
Refactor 


Import... 

Export... 




Alt+Shift+W ► 
Ctrl+C 


Ctrl+V 

Delete 


Ctrl+Alt+ Shift+ Down 


Ú 

0 

Q 

e 


Alt+Shift+T ► 




Android Application Project 

Java Project 

Project... 

Android XML File 
Package 
Class 
Interface 
Source Folder 
Enum 
Annotation 
Java Working Set 
JUnitTest Case 
Untitled Text File 


rra; 

rrír 
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¿Qué ocurre si la configuración del dispositivo encaja entre dos carpetas de recursos? 

Android utilizará la carpeta más cercana que esté por debajo. Si son imágenes, los recursos de esta carpeta, los 
estirará hasta completar le tamaño que necesita la pantalla. 

Por ejemplo, supongamos que tenemos las carpetas de recursos: “layout”, “Iayout-w320dp” y “Iayout-w820dp”. 
Si la pantalla de nuestro dispositivo es de 480dp, Android nos devolverá los recursos de “Iayout-w320dp”. Por 
otro lado, si la pantalla fuera inferior a 320dp entrará en la carpeta por defecto “layout”. Con las versiones de 
Android ocurre lo mismo. Y con los idiomas, se devuelve la carpeta “values-XX” del idioma del dispositivo; o si no 
existiera ninguna, directamente “valúes”. 


¿Podremos tener varios ficheros de recurso con el mismo nombre? 

Sí, pero en carpetas diferentes. Supongamos que queremos hacer un diseño 
para Tablets y otro para el resto de dispositivos (como los Smartphones). 

Crearemos el mismo nombre de fichero las carpetas correspondientes y así 
Android tomará el que precise, dependiendo en cuál dispositivo se ejecute la 
aplicación. 

Android primero buscará en la carpeta que corresponda. Por ejemplo, si 
queremos cargar en una Activity el “fichero_disenio.xml”, y la aplicación se 
ejecuta en un Tablet, primero buscará en la carpeta “Iayout-w820dp”, como lo 
encuentra carga este. Por otro lado, el fichero “activ¡ty_ma¡n.xml”, si se 
ejecuta la aplicación en un Tablet, no lo encontraría en la carpeta “layout- 
w820dp”, por lo que tomará el de la carpeta “layout”. Si la aplicación se 
ejecuta sobre un Smartphone, directamente se buscará en la carpeta “layout”; 
pues no cumple la condición de la carpeta “Iayout-w820dp”, al no llegar la 
pantalla del Smartphone 820dp de anchura. 

Evidentemente los dos ficheros “fichero_disenio.xml” serían diferentes, sino no 
tendría sentido crear dos ficheros, pudiendo meter todo junto en la carpeta “layout”. 


- & 

> & ^rc 

> gen [Generated Java Files] 

> tÉi Android 4.4.2 

> EÉ, Android Prívate Librarles 

as sets 

> bin 

> §3? libs 
a §3? res 

> drawable-hdpi 
O» drawable-ldpi 

> |S> drawable-mdpi 

> l23> drawable-xhdpi 

> & drawable-xxhdpi 
a & layout 

d act¡v¡ty_ma¡n,xml 

7 fichero disenio.xmli 
a & Javou^wSZMj^^^^— 
f¡chero d¡senio.xml| 


Referencias: 

O http://developer.android.com/guide/topics/resources/providing-resources.html 

O http://developer.android.com/training/basics/supporting-devices/languages.html 

O http://developer.android.com/training/basics/supporting-devices/screens.html 

O http://www.ethnologue.com/statistics/size 

O http://developer.android.com/training/basics/supporting-devices/languages.html 

O http://developer.android.com/reference/iava/util/Locale.html 

O http://es.wikipedia.org/wiki/ISO 639-1 
O http://www.loc.gov/standards/iso639-2/php/code list.php 
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Context 


Context 


¿Es necesario entender cómo funciona el Context? 

Si estás empezando a programar en Android, al principio no es necesario que conozcas todos sus detalles, así 
que este tema si quieres échale una ojeada rápida y ve al siguiente. 

Digo esto porque el Context es de esas cosas que se entienden cuando ya llevas alguna aplicación hecha en 
Android (Es como ¿qué va antes si el huevo o la gallina? ¿Aprender Context antes o después de hacer 
aplicaciones?). En Android se utiliza mucho el Context, y la mejor manera de entenderlo es practicándolo, por lo 
que lo entenderás “durante”, ni antes ni después. Eso sí, cuando ya te hayas pegado con el Context unas 
cuantas veces te recomiendo que vuelvas a leerte este tema, ya verás cómo muchas cosas serán reveladas con 
una segunda lectura después de la práctica. 

Si ya tienes un cierto nivel en Android, entender cómo funciona el Context en profundidad será de vital 
importancia para programar con soltura en Android. 


¿Qué es? 

Es el interfaz global de información acerca del entorno de la aplicación. Es decir, nos proporciona a los 
programadores acceso a métodos que nos facilitan la vida. Como lanzar nuevas Activities con startActivityO (¿A 
qué no programamos cada línea de código de lanzar una aplicación? Pues no, ya que lo hace el Context), 
obtener recursos de la carpeta res con getResources() o los Strings con getStringQ, obtener los datos 
almacenados en local con getSharedPreferences(), entre otros muchos. 

El contexto es justo eso, un contexto. Proporciona un acceso a todo el entorno de la aplicación; es decir, permite 
el acceso a los recursos de la aplicación (como a las imágenes, colores, etc) o del sistema operativo para 
Activities, Services u otros componentes. Además, cada Context está ligado al ciclo de vida del elemento que 
cubre. 

Es una clase abstracta que implementa Android. 

Los elementos que tienen Context heredan de Context. Otros que no tienen Context, como View, necesitan que 
se lo pasen para acceder a los recursos (imaginemos una Activity que tiene un tema oscuro, y otra que tiene un 
tema claro; si le pasamos el Context de la Activity de tema claro a la View, cargará un tema claro y no el oscuro). 


¿El contexto es siempre “this”? 

No, es parte pero no el total. No confundamos “this” que la llamada al objeto mismo (para llamar a sus variables 
globales y métodos del propio objeto). Para poder llamar a “this” la clase tiene que heredar de una clase que 
herede de Context. 

Además, no siempre se llama con “this”. Existen varios tipos de Context, y se obtendrán de diferentes maneras 
dependiendo desde donde lo queramos obtener y qué tipo queramos obtener. Esto lo respondemos en las 
siguientes preguntas. 
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¿Cómo se obtiene? 

Se puede obtener desde (iremos viendo ejemplos a medida que avancemos por el libro): 

O Una clase que extiende de Context (como Activity, Service, Application, etc): this 
O Una clase que extiende de Context desde una clase anónima: ClaseActivity.this 
O Una clase que NO extiende de Context (como View): View.getContextO 
O La aplicación: Activity.getApplicationContext() 

O Otro context: ContextWrapper.getBaseContext() 

O La Activity del Fragment que lo contiene: getActivity() 

Nota: ContextWrapper actúa de proxy entre contextos, delegando las llamadas de un contexto a otro 


¿Qué tipos de existen? 

Existe el Context de: 

O Aplicación: Como es lógico, al cubrir todo el ciclo de vida de la aplicación desde que la arrancamos hasta 
que muere, cada aplicación tiene un único contexto de aplicación; además, este contexto engloba a 
todos los demás. Lo que hace Android es crear una instancia Singleton que se crea al iniciar el proceso 
de la aplicación. Se puede acceder desde una Activity o un Service con getApplication(), o desde 
cualquiera que herede de Context con getApplicationContext(). 

O Activity o Service: Heredan de ContextWrapper que a su vez hereda de Context. ContextWrapper hace 
que se apodere de todas las llamadas y las envíe a una instancia oculta de Context (conocido como 
“Base Context”) 


¿Todos los componentes de Android heredan de Context? 

No, estos dos no heredan de Context (por lo que Android se los pasa de algún modo): 

O BroadcastReceiver: Pero se le pasa un Context en el onReceiveQ cada vez que un nuevo evento 
difundido por el sistema entra. 

O ContentProvider: Puede acceder al Context con getContext() y se le devolverá el Context de la aplicación 
que lo esté ejecutando (puede ser la misma aplicación u otra diferente). 

¿Quién suele pedir el Context? 

Normalmente piden el Context (iremos viendo ejemplos a medida que avancemos por el libro): 

O Al acceder a los recursos como imágenes, Strings, etc 
O Al crear nuevos Views, Listeners, Adapters, Intents, etc. 

O Al acceder directamente a componentes como ActionBar, Intents, etc. 

¿Es seguro utilizar el Context en todos los casos? 

A veces puede producir fugas de memoria que es mejor evitar. Lo mejor y ante la duda de si se provocará una 
fuga de memoria o no suele ser mejor utilizar: getApplicationContextQ. 
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Aunque si comprendes perfectamente la utilización del Context, es aconsejable utilizar el Context apropiado en 
cada ocasión. 


Referencias: 

O http://iarroba.com/context-de-android/ 

O http://developer.android.com/reference/android/content/Context.html 
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Layout (Diseño) 


Layout 

¿Qué es? 

Un diseño (Layout) define una estructura visual. Es la interfaz gráfica de la 
aplicación. 

¿Quién puede mostrar un diseño gráfico? 

Normalmente lo van a mostrar Activity, Fragments o App Widget. 


¿Dónde se declara un diseño? 

O bien, estáticamente en la carpeta “res/layout” en XML, que es lo 
recomendable por consumir menos recursos, al tardar menos en 
procesarse; o en Java en tiempo de ejecución, que dependiendo de lo que 
tenga que procesar, podría llegara bloquear al usuario. 



¿Cuál es la mejor manera de declararlo? 

En XML, porque separa la capa de representación del código que controla el comportamiento. Además, es más 
fácil encontrar los errores, ver la estructura, y se puede contemplar el resultado final en tiempo real mientras el 
desarrollador crear la interfaz. 


¿No hay que declarar ningún DTD en los XML? 

Es un XML pero no hay que declarar ningún DTD (El “<?Doctype ... >” no hay que ponerlo), debido a que Android 
usa etiquetas dinámicas 

Referencias: 

O http://developer.android.com/guide/topics/ui/declaring-lavout.html 
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Carpeta Layout 

¿Cantidad de Views que puede mantener directamente? 

Una 

¿Qué es una View? 

Un elemento para construir la interfaz de usuario (lo veremos con detalle 
más adelante) 

¿De qué actúa? 

De raíz del árbol de Views 

¿Qué tipo de elemento puede mantener como raíz del fichero? 

ViewGroup, View o <merge> 


£ Package Explorer £2 |_© ^ ^ “ B 

a miApp 
a src 

t jarroba.ramón.miapp 

t> ÍÍ9 gen [Generated Java Files] 
t> Android 4.3 
t> Android Prívate Libraries 
¡¿b- assets 
0 bin 
t> & libs 
a & res 

I> fe drawable-hdpi 
fe drawable-ldpi 

l> fe drawable-mdpi 

0 fe drawable-xhdpi 

fe drawable-xxhdpi _ 

[o] activity_main.xml 
(o) activity_segunda.xml 
|<íj fragment_ejemplo.xml 

> fe menú 

1> fe valúes 

|> fe values-sw600dp 

> fe values-sw720dp-land 

I> fe values-vll 

> fe values-v14 

[ci AndróidManifestxml 
* icjauncher-web.png 
[f] proguard-project.txt 
H) project.properties 


Entorno gráfico para diseñar la Interfaz de usuario 

Para diseñar una Interfaz tenemos que dirigirnos al directorio res/layout. Ahí crearemos o editaremos ficheros 
XML. 


Editar un fichero de diseño de interfaces gráficas 


Abriremos el editor de 
diseños gráficos haciendo 
doble clic sobre un fichero 
de diseño (Un fichero XML 
de la carpeta “layout"). 

Este editor consta de las 
siguientes partes: 

1. Palette: Donde las 
Views se pueden 
arrastrar al Can vas 
o al Outline. De 
aquí podremos 
arrastrar cualquier 
elemento (estos 
elementos son los 
denominadas 
Views) tanto al 
Canvas como al 
Outline. 


^activrty_s egunda xmi : 


© Palette xx 

Form Widgets 

©TextView © LargeText 
©Médium Text ©Small Text 
W Button © Small Button 
U ToggleButton [✓) CheckBox 
(•) RadioButton 
© CheckedTextView 
0 Spinner 

■ ProgressBar (Large) 

■ ProgressBar (Normal) 

■ ProgressBar (Small) 

■ ProgressBar (Horizontal) 
SeekBar 

|H QuickContactBadge 
IT1 RadioGroup jK RatingBar 


Lj Text Fiekk 
D layouts 
l_J Composite 
LJ Images & Media 
l_i Time & Date 
LJ Transitkms 
Advanced 
O Other 


- Q Nexus S » 0 ▼ ★ AppTheme » 0 MamActrvrty 

§ SE Q O El ~ E □ 13 IB 


lt Uut l ine 


■ 1 


1 Si miApp 



Escriba para guardar: 


Guardar 


J Graphical Layout actrwty segunda.xml 


O 


é ¡Ñj RelativeLayout 
a Q2 linear! ayo ut 
fT~| edrtText 
j_ button - 'Guardar' 
© textView Es riba 


C Properties 


Id 

®*id/button — <■ 

♦ layout Parameters 

I) 

Styte 

android:buttonStyle — 

Text 

Guardar — 

Hint 

~ 

Content Dése ript ion 

- 

fe TextView 

1) 

Text 

Guardar — 

Hmt 

- 

Text Color 

®android:color/pnmary_ - 

Text Color Hint 

■ ©android:co!or/hmtJ — 

Text Appearance 

?android:attr/textAppear — 

Text Size 

- 

Typeface 

- 

Text Style 

- 

Font Family 

- 

Text Color Lmk 

■ ©android:color/holo_. — 

Max Lines 




2. Configuration Chooser: Barra con las diferentes configuraciones de pantalla y de renderizado para la 
View que seleccionemos (se explican a continuación) 
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3. Canvas: Editor visual. Aquí veremos en tiempo real como va quedar el diseño. Una sugerencia, si tienes 
varias Views ya colocadas, puede que sea misión imposible seleccionar con el ratón la que queramos 
aquí, por lo que recomiendo usar el Outline para mayor comodidad a la hora de seleccionar una View 

4. Outline: Jerarquía en árbol de las Views. Muy práctico para trabajar con las diferentes capas que 
componen la interfaz gráfica (aunque no es siempre así, son capas como las de los programas de 
edición de imágenes; dicho de otro modo, si tenemos dos Views, una encima de otra, la que aquí 
aparezca más arriba cubrirá a la de más abajo) y su jerarquía 

5. Properties: Propiedades de la View seleccionada. Donde podremos editar su texto, color, tamaño, etc 
(también se explicará en detalle más adelante) 

6. Pestañas para cambiar entre el “Diseñador gráfico” y el “código XML” que se genera. Por motivos 
prácticos, en este libro ofrece el código XML, que habrá que copiar en la pestaña de XML para seguir los 
tutoriales. Y en ciertas ocasiones convendrá trabajar directamente en esta pestaña XML, pues el 
diseñador gráfico no es tan bueno como gustaría 


Referencias: 

O http://developer.android.com/tools/help/adt.html 
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Configuration Chooser 

Este menú de configuración podrá variar algún botón dependiendo de la View seleccionada y en dentro de que 
otra View está. Se va a explicar el más genérico. Esta descripción corresponde a la captura anterior, donde 
hemos seleccionado un Button dentro de un LinearLayout: 


1 . 

2 . 

3. 

4. 

5. 

6 . 

7. 

8 . 
9. 



y NouiS 


Añadir previsualizaciones en miniatura 
Cambiar el tamaño de pantalla 
Rotar pantalla 
Tema 

Actividad que asocia al Layout Tert 

Cadenas de texto 

Vista previa del diseño de las Views dependiendo de la versión del sistema operativo (esto es solo una 
vista previa, que nos muestra cómo quedará según qué versión, no obliga a ello) 

Posición vertical u horizontal de las Vies dentro de un ViewGroup 

Rellenar a lo ancho o alto 


10. Alinear a la línea base, Márgenes y Gravedad 

11. Distribuir los pesos por igual a todos los elementos, Asignar todo el peso al elemento seleccionado, 
Poner un peso, Eliminar todos los pesos 

12. Emular un tamaño real de los píxeles, Hacer zoom hasta rellenar el Layout en la pantalla, Hacer zoom 
hasta el 100% 


13. Aumentar o disminuir el zoom 


Properties 

Existen varias agrupaciones de las propiedades: 

O Nivel superior: Los atributos que se 
recomiendan rellenar siempre (estarán 
dentro de otros niveles, cambiado aquí o en 
el nivel correspondiente cambiará al otro 
directamente, pues es el mismo atributo) 

O Layout Parameters: Parámetros respecto al 
padre (un GroupView) y variarán según el 
padre. Usado para posicionar el cuadro 
contenedor de la View. Ejemplo: Centrar la 
View respeto al padre 

O (Nombre de la View o View Padre): parámetros 
el contenido del texto 

O View: parámetros comunes para todas la Views. Ejemplo: El fondo o el estilo 

O ViewGroup: parámetros solo de las ViewGroup. Ejemplo: Animar a los hijos al modificarlos 

O Deprecated: parámetros anticuados que no se deben usar 



especiales para la View. Ejemplo: Para un TextView será 
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UnearLayout horizontal 


Propiedades de las Views 

¿Cómo es la geometría de todas las View? 

Rectangular 


“I 


TI TI II O 

Ponijoñp HpcrrirrÍQp 


¿De qué se compone una View en el diseñador gráfico? 

O Marco del área de la View. Es un rectángulo invisible que delimita el área total que ocupa la View. Este 
rectángulo puede estar ajustado o no a su contenido. Es invisible para el usuario, pero el desarrollador lo 
puede ver en el diseñador gráfico al seleccionar una View. 

O Uno o varios dibujos que mostrar al usuario. Pueden tener forma de texto, botón, cuadro seleccionable, 
una imagen cualquiera, etc. Las llamadas ViewGroup no tienen un dibujo propio, sino que al contener 
otras Views -que tienen rectángulo que marca su área y dibujo- tendrán sus dibujos. 


¿Las propiedades afectan al dibujo o el rectángulo que la contiene? 

Normalmente las que están contenidas en el recuadro Properties en el apartado “nombre de la View en 
cuestión” afectan sólo al contenido; como puede ser cambiar el color al texto. El resto afectarán a las dos, es 
decir, si afectan al rectángulo que contiene al dibujo, entonces afectará al dibujo; por ejemplo, si hacemos 
desplazamos el rectángulo del área, el dibujo se moverá junto a éste. 


¿Qué diferencia hay entre las propiedades a la misma View y respecto al padre (Layout Parameters)? ¿A caso el 
padre no tiene sus propias propiedades? 

No hay que confundir entre las “propiedades del padre” con las “propiedades respecto al padre”. Las primeras 
son las que le afectan directamente a la View que es padre de alguna otra View, como cambiar el fondo 
(Background). Y las que son respecto al padre definen por ejemplo la colocación respecto a este (especificando, 
por ejemplo, que la View hija está 5 píxeles a la izquierda respecto al marco del padre), o decidir si ajustar el 
tamaño de la View a todo lo que nos deje el padre (dicho de otro modo, agrandar la View hasta que choca su 
marco con el de la View padre). 


Nota: A continuación explicaremos algunas de las propiedades más complejas, otras son muy sencillas de 
entender y no merecen más explicación (como Background que es fondo, o Text que es el texto, etc). 
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Posición (Position) 

¿Cuál es el pixel que posiciona una View? 

En la coordenada [0,0], que corresponde con la esquina superior izquierda de la 
View. Las Views se colocan siempre en relación left (a la izquierda o coordenada 
X) y top (la parte superior o coordenada Y) 


¿Cómo se obtiene en Java la posición? 

Cuando se obtiene la posición con getLeft() o getTop() se obtiene en píxeles, y es 
siempre respecto a la esquina superior izquierda de la pantalla (coordenada [0,0]) 

Para facilitar las cosas, se ofrece también getBottom(), que es lo mismo que hacer 
getTop()+getHeight(); y getRIghtQ, que equivale a hacer getLeft()+getWidth(). 



Tamaño (Size) 

¿Cómo se define el tamaño? 

El tamaño de una View se define con wldth (anchura) y height (altura). 


¿Cómo se obtiene en Java la anchura medida y altura medida? 

Las dimensiones medidas se obtienen en píxeles con getMeasuredWidth() 
y getMeasuredHeight(). Definen cuanto de grande quiere ser la View 
dentro del padre. 

En la imagen de ejemplo, podemos ver que la ImageView quiere ser más 
grande que el LinearLayout (supongamos que el LinearLayout mide 
100x200 y que contiene una ImageView que quiere medir 150x250) 



¿Cómo se obtiene en Java la anchura dibujada y altura dibujada? 

Se obtiene en píxeles con getWldth() y getHeight(). Definen el tamaño actual que tiene la View en la pantalla. No 
deberían de ser diferentes las dimensiones dibujadas que las medidas (que siempre coincidan recae sobre el 
desarrollador). 

En la imagen de ejemplo, podemos ver que la ImageView tiene el tamaño el LinearLayout (en el ejemplo anterior 
indicamos que el LinearLayout mide 100x200 y la ImageView quería medir 150x250; pero como el padre, que 
es el LinearLayout, no le permite crecer, la ImageView solo conseguirá como máximo el tamaño del padre, es 
decir, un tamaño de 100x200). 
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Linear Layo ut 


Relleno (Padding) 

¿Qué es? 



Rodea a una View (left, top, right, bottom). Se utiliza para compensar el 
contenido de la View; es decir, para que el contenido del rectángulo de la 
View se desplace en su interior 


¿Añadir Padding cuenta para el tamaño de la View? 

Sí, ya que modifica la forma del rectángulo que define a la View 


¿El Padding pertenece al padre o a la misma View? 

El Padding pertenece a la View donde se define 


Margen (Margin) 

¿Qué es? 

Desplaza a una View (left, top, right, bottom). Se utiliza para posicionar 
con más precisión a la View 

¿Añadir Margin cuenta para el tamaño de la View? 

No, ya que solo la desplaza 

¿El Margin pertenece al padre o a la misma View? 

El Margin pertenece al padre de la View que lo define 


Linear Layo ut 
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Ejemplo de crear una diseño (Layout) o vista en XML desde cero 


Lo que haremos 

Queremos conseguir el siguiente diseño. Para ello modificaremos el diseño que ya existen en la carpeta “layout” 
que se llama “fragment_main.xml”. Así quedará guardado en un fichero XML, que se encuentra en la carpeta 
“layout” que a su vez está dentro de la carpeta “res”. 



Utilizaremos tanto Views como ViewsGroup. Deshaciendo mentalmente el diseño en los siguientes elementos: 


ficheroLayout.xml 


TextView 


Escriba para guardar; 




Guardar 

EditText 

Button 


LinearLayout 


RelativeLayout 


La raíz (sin contar el fichero, que no se suele contar) será un RelativeLayout para poder colocar donde queramos 
en pantalla los elementos TextView y un LinearLayout. El LinearLayout lo colocaremos en formato horizontal 
para que dé cabida a la View EditTexty al Button; además, de agrupándolos en un solo grupo para cuando los 
tengamos que mover nos resulte más cómodo. 

Nos dará el siguiente árbol mental (estos pasos son obligatorios si tenemos un diseño previo que queremos 
hacer realidad, las primeras veces que toquemos la herramienta recomiendo jugar con el diseñador gráfico). 
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Proyecto 


DibujarUI 

> 
t> 

> 

> 


£3 src 

§5 gen [Generated Java Files] 
^ Android 4.4.Z 

Android Prívate Libraries 


fe II bs 
fe res 


(23 drawable-hdpi 
£3 drawable-ldpi 
& drawable-mdpi 
(23 drawable-xhdpi 
C3* drawable-xxhdpi 
& layout 

'□ artivitv main.xrril 


^^^^gmen^^ainjímlJ 


[> (23 menú 

(> l23 valúes 

> £3 values-vll 

> values-v14 

> & values-wSZOdp 
ja AndroidManifest.xml 
Qi icjauncher-web.png 
Q proguard-project.txt 
|§] project.properties 


¿No utilizamos el fichero de diseño “activity_main.xml”? 


En este ejemplo no lo utilizaremos. El fichero “activity_ma¡n.xml” 
se encarga de dar un diseño a la Activity, pero ya tiene código que 
ayudará a que contenga al fichero “fragment_main.xml”. Podrás 
deducir que una Activity puede contener Fragments. Recuerdo que 
el código que genera automáticamente el SDK de Android en 
Eclipse, monta un Fragment de ejemplo dentro de una Activity. Ya 
que tenemos el Fragment trabajaremos sobre él (es decir, se 
deriva el grueso de la Vista al Fragment; antiguamente se hacía 
todo directamente en el Activity, aquí daremos lo nuevo y veremos 
que se hace igual). Lo veremos más adelante, aquí nos 
centraremos en diseño. 


Lo primero que haremos será crear otro proyecto básico, como ya hicimos. Iremos a la ruta “res/layout” y 
abriremos el archivo llamado “fragment_main.xml”. 

Crearemos la estructura de la interfaz gráfica arrastrando elementos del panel de “Palette”. Hasta que cumpla 
lo que queremos tanto en el panel de “Canvas” (el cómo lo verá el usuario) y en el “Outline” (el cómo quedará la 
estructura de árbol que queríamos): 


= □ 

Structure -: ► 


Outline 



O 

RelativeLayout 


l'At. 

textViewl - 

ÍL 

LinearLayout 

0 editTextl 1 


^K|button1 - 



¿Aparecen símbolos amarillos con 
exclamación y código subrayado de amarillo? 


Unicamente son advertencias 
(Warnings), que habrá que corregir, 
pero que permite ejecutar y que 
funcione nuestra aplicación perfectamente. Nos 
preocuparemos si sale subrayado en rojo o con 
círculos rojos con una X blanca. Explicaremos 
como corregir estas advertencias; con ello, 
aprenderemos a hacer bien las cosas. De 
momento lo dejaremos así. 



Tocaremos algunas propiedades para ajustar algunas cosas, como los textos y que quede clavado a lo que 
queremos. 

Luego cambiaremos a la pestaña de “Código XML” y veremos el código generado (también podríamos haberlo 
diseñado desde aquí; y créeme, en ciertas ocasiones es mucho más cómodo) 
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Podemos comprobar que este código también cumple perfectamente lo que diseñamos desde un principio: 


ficheroLayout.xml 

fragmaot_m»o ar* S3 _ 


u. andró: 


¡lativeLayout mlns:and; ■. d - "ftt tp : , 
mina: tcols*“ftt tp.*//r chara*. android. con/tocia" 

•ndroid:layout_vidth*"xatch _p*raat" 
andró id: layout_heigbt" "*atch_parent ■ 

and: oíd: paddmgSo 11 cíe- *# donen /a ct i vi ty_ vertí ca 2_aa rgm 
android:paddmgL«ft*"#diAen/activity_horirontal_Bargin 
android: paddmgRight-"# diaen/activa rontai_«argi. 

android:paddir.gTop""#diaer., activisy_vert:cal_aaríir." 
tocia:context* “coa. jarropa.dxbujaru:.MainArtiv¿ tySPiac 


android:id»"**id/r«*tVi»*;" 
and:oíd:layout_width-*»rap_content" 
android:layout_height-"vrap_content" 
andróid:layout_alignParentTop-"trae" 
android:layout_ccntcrHorixontal a "true” 
android: layout_*argmTop*’Tdp“ 
android:text* N £acriPa para guardar;" 
^ndrcid^text^jearance^Vandrc^^a^^^cx^^gcaréncsjarj»^ 


android:layout_width«"»rap_eontent" 
android:layout_&eig&t«"vrap_eontent" 
android: layout_belov-”#-»id/rextVievl • 
android:layout_c«nt«rHonroncal*"true" 
android: layout_»arginTop* "31 dp " > 


cEditTexc 

android:id» “#*id/editr«xti* 
android:layout_vidth»“; 6Bdp" 
android: layout_fceigftt“ “vr*p_coti tent 
android:hint“""> 

<regueatFocua /> 
c/EditT«xt> 


37 


android: id* " 9 * id/bu t ton! “ 
android: layout_vidtb» **vrap_conten C ** 
androíd:layout_heigbt~ n vrap_ content 
android:text«"Guardar" /> 


üü] Griphical Layout T fragmcnt.maaixml 


¿Ejecutamos este código? 


Podemos ejecutarlo en el emulador o en 
un dispositivo, como ya se enseñó. Pero de 
momento solo estamos diseñando las 
Vistas. Todavía no hemos dado 
funcionalidad. No te impacientes, todo 
llegará antes que tarde :) 
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Elementos de diseño XML 


< LinearLayout 

android: id= ,r (?+id/LinearLayoutl" 
andró i d: layout_wi dth= "ma. t ch_paren t" 

Después del primer vistazo de cómo se forma un diseño (Layout) en andr 0 id:iayout_height» macch_ P arenc 

android: gravi ty= "centerl top" 

Android, pasamos a explicar para qué sirven los elementos y sus partes. 

Estos elementos XML se componen de una etiqueta de apertura <start- 
tag> y cierre </end-tag> (el ejemplo de la derecha es de estos), o 
directamente con etiquetas vacías <empty-tag/>. Contendrán atributos 

opcionales, mayormente su nombre comenzará con el espacio de nombres “android:” y luego la propiedad a la 
que afectan, como por ejemplo “androiditext”. Cada elemento tiene sus propiedades. 


¿Si hay editor que nos hace el código para qué aprender el código XML? 


Aunque puedas ver esta parte como un extra para aprender todos los entresijos de 
Android; la verdad es que el editor todavía es un poco carente, y con algunos 
problemas que se solucionan al escribir directamente en XML. Esto no quita que 
usemos el editor, ya que también nos ayudará a colocar las cosas y a crear código 
más deprisa en algunas partes (como para crear las Views con los atributos más 
usados, es decir, arrastrar las Views de la Palette y luego continuar en el XML) 

Un bloque básico para construir interfaces de usuario. Dicho 
de otro modo, un componente individual de la interfaz gráfica 


¿Cómo se declara en XML? 

Con el nombre de la <View/> 

O Si son individuales: se escriben con etiquetas vacías 
(Salvo con RequestFocus, ver más adelante). Un 
ejemplo es: <Button/> 

O Si son grupales: se escriben con etiquetas de 
apertura y cierre. Un ejemplo es: 
<LinearLayout></LinearLayout> (más en ViewGroup) 


▼ ] Q Nexus One - 0 T | ★ AppTheme ▼ [ 

© PlaceholderFragment ▼ £ ▼ I lypi 19 ▼ 

m m h Ha <=i <01 <&i qq, 




DibujarUI 



Escriba para guardar: 


Guardar 


Outline 


■E RelativeLayout 

[Ábl textViewl - "Escríba para guardan' 

á [(J LinearLayout 
ÍT] editTextl 

l^^button^^Guardarj 


□ Propertíes =¡> | 1 % | ÜÜ | @ El 


Los elementos son: 

View 

¿Qué es? 


¿Cuánto ocupa? 

Un área rectangular de la pantalla 


<Button 

android: id= "@+±d/buttonl" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android: text= "Guardar" /> 


¿De qué se encarga? 

De dibujar el elemento y de controlar los eventos de éste 


¿Cantidad de Views puede mantener directamente? 

Ninguna 


¿Cómo se disponen las diferentes Views? 

En forma de árbol, cuya raíz es el fichero Layout 


¿Se le conoce por otro nombre? 

93 


www.Jarroba.com 




















Widget (no confundir con las “App Widget” que se pueden colocar en el escritorio de Android) 


¿Cuáles son estas Views? 

O Individuales: TextView, EditText, ProgressBar, ImageView, Button, CheckBox, etc 
O Grupales: LinearLayout, FrameLayout, etc (más en ViewGroup) 

Referencias: 

O httD://developer.andro¡d.com/reference/android/v¡ew/View.html 


ViewGroup 

¿Qué es? 

Es una View que sirve de contenedor de Views 


¿Cómo se declara en XML? 

Con el nombre de la <ViewGroup></ViewGroup>. Se 
escriben con etiquetas de apertura <start-tag> y cierre 
</end-tag>, debido a que contendrán otras etiquetas de 
otras Views. Un ejemplo es: <LinearLayout></LinearLayout> 


▼ Q Nexus One ▼ j @ ’ r ★ AppTheme ▼ | 
© PlaceholderFragment ▼ j ▼ | ijji 19 ▼ 


Bm \ SBH Bis QQ I Q Q 




DibujarUI 





Escriba para guardar: 


Guardar 


Outline 


• m RelativeLayout 

fi to«tView^^ l Escriba para guardan' 1 

TíñearLayoü^ 

IHeSffTSti 

[ok] buttonl - "Guardar" 


< > 
m Properties |t> | | a z [ ^ | Bl B 


<No properties> 


¿Cantidad de Views puede mantener directamente? 

Normalmente las que queramos, algunas solo una para 
funciones específicas. Todas la Views que estén dentro 
de esta ViewGroup son denominadas hijas 


<LinearLayout 


android:layout_width= "wrap_content n 
android:layout_height= "wrap_content" 
android:layout_below= " @+id/textViewl' 
android: layout_centerHorizontal= "true 
android:layout marginTop= "31dp” 


¿No hemos dicho qué una View no puede contener a 
ninguna otra? 

Son la excepción. Aunque hereda de View y por tanto es 
una View, está diseñado para contener varias Views 


<EditText 

android:id= "@+id/editTextl" 
android:layout_width= "188dp " 
android:layout_height= "wrap_content" 
android:hint= ""> 

<requestFocus /> 

</EditText> 

<Button 

android:id= "8+id/buttonl" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:text= "Guardar" /> 

</LinearLayout> 


¿Es bueno usar muchas ViewGroup anidados? 


No, cuanto menos se usen mejor. Además, cuanto más superficial sea el árbol de Views mejor; cuanto más 
profundo sea el árbol más tarda en dibujarse en pantalla. Es decir, un árbol ancho es mejor que uno profundo 
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¿Cuáles son estos VlewGroups? 


□ 


O LinearLayout: Organiza a sus hijos en filas horizontales o en verticales. Además, crea una 
barra de Scroll si la longitud es superior al tamaño de la pantalla 


O FrameLayout: Reserva el espacio en pantalla para un único hijo 
(Normalmente este hijo será un Fragment). Para organizar Views hijos de una 
manera que posibilite el escalado para los diferentes tamaños de pantalla, sin que 
se sobrepongan unos a otros. Se pueden añadir varios hijos al FrameLayout; de 
este modo, si se le añaden más de un hijo, se irán apilando y solo se mostrará el 
último en añadirse. 


Espacio 
reservado 
para un hijo 



O RelativeLayout: Especifica la colocación de los hijos en relación a la colocación de los 
otros hijos (Ejemplo: el Button a la derecha del EditText), o respecto a sus bordes 


O ViewPager: Permite pasar de una página a otra con el dedo a derecha o izquierda. 
Dichas páginas son conjuntos de Views. 



B 


GrldLayout: Organiza sus hijos en una cuadrícula 


O WebView: Muestra páginas web 


<html> 

<!-- web page —> 
</html> 


Referencias: 


O http://developer.android.com/reference/android/view/ViewGroup.html 


RequestFocus 

¿Qué es? 

Cualquier View puede incluir a este elemento vacío. Al 
iniciarse la pantalla, proporciona el foco al padre que lo 
contiene 


¿Cómo se declara en XML? 


@1 * O Nexus One - 0 - ★ AppTheme ’ 

0 PlaceholderFragment - igpi 19 - 

Hl bbhBb <-m<ai<=i<a 


DibujarUI 


: Structure =: ► 

Outline 


d [j^Relative^out 

Txn^di^xtr 

|T~| editText¿ 


< 

> 

□ Properties 

* D a i 1 «I 1 ffi B 

Id 

0- 

±¡ Layout Para... 

[] 

Background 



Con el nombre de la <RequestFocus/>. Se escribe con etiquetas vacías <empty-tag/> dentro de la View que 
queramos que tenga el foco. <EditText 

android: id= "@+id/editTextl" 
android:layout_width= "188dp" 
android:layout_height= " wrap_content" 
android: ems= "10" > 

<requestFocus /> 

</EditText> 


¿Cuántos tags RequestFocus puede haber por pantalla? 

Solo se pude haber uno de estos por fichero de diseño. 
Ya que solo un elemento puede tener el foco a la vez, y 
en el estado de inicio -que es como se declara en el 
diseñador gráfico- solo se le puede asignar a una View. 


<EditText 

android: id= "@+id/editText2" 
android:layout_width= "188dp" 
android:layout_height= ”wrap_content" 
android: ems= "10" /> 
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Inelude 

¿Qué es? 

Incluye un fichero de diseño XML dentro del que lo 
declara 


¿Cómo se declara en XML? 

Con el nombre <include/>. El fichero se declara en el 
atributo “layout” buscándolo con: 
@layout/nombre_fichero_layout (si ponemos la View 
de inelude desde la “Palette” el asistente 
nos pondrá los atributos necesarios, 
nosotros solo tendremos que elegir el 
fichero que queremos cargar dentro del 
inelude) 


[<?) ▼ [] Nexus One ▼ @ 


★ AppTheme ▼ Q MainActivity ▼ # 


#19 


imHl [0 e 





Guardar 


[Vf www.Jarroba.com 


Outline 


i ^ LinearLayoutl 

jbutton^^Guardar^^^^^ 

¡nelude - clisenio a¡nclu¡r I 


B Properties > | | a z | ^, | Iffi El 


<LinearLayout 

xmlns:android= "http://schemas.android.com/apk/res/android" 

android:layout_width= "match_parent" 

android:layout_height= "match_parent" 

android:gravity= "center \ top" 

android:orientation= "vertical" > 


<Button 

android:layout_width= "fill_parent" 
android:layout_height= "wrap_content" 
android:text = "dstring/guardar" /> 

<include 


¿Siempre es necesario añadir en inelude 
un merge? 

No, pero es muy recomendable, ya que así 
quitamos un nivel de profundidad al árbol 
(tal como está el ejemplo, el inelude es lo 
mismo que tener el contenido del anterior </LinearLayout> 

merge, pero sin las etiquetas ni merge ni inelude, ya que se haría la sustitución del código del merge al inelude) 


android: layout_width= f, wrap_content" 
android:layout_height= "411dp u 
android:layout_marginLeft= "136dp" 
android:layout_marginTop= "186dp" 
layout= "@layout/d±senio a = incluir” ■> 
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Atributos de las View 


Se ha visto cómo crear los elementos. Todavía no hemos entrado en detalle de cómo se les da un poco de forma 
con los atributos. 


¿Todas las Views tienen atributos? 

Sí, cada View tiene sus propios atributos dependiendo de cuál sea. Por ejemplo, TextView tendrá el atributo 
“android:textSize” para agrandar el tamaño del texto; sin embargo, ImageView no tendrá ese atributo, tendrá 
otros 


¿Son los mismos atributos dependiendo de cuál sea el padre de la View? 

Existen los atributos de la View. Por otro lado, los atributos del padre -el ViewGroup contenedor- de la View que 
variarán dependiendo del padre. 

Las características de los atributos heredados de un padre ViewGroup son: 

O Nombrados como “layout_algo”, como: layout_width, layout_centerHorizontal, layout_marginBottom, etc 

O LayoutParams: atributos de una View que tiene que definir, que son implantados por su ViewGroup 
padre. Son propiedades que especifican el tamaño y la posición para cada View hija respecto a su 
ViewGroup padre 

O Todos han de definir: layouLwidth (anchura) y layout_helght (altura). Se pueden definir por tamaño 
exacto (ejemplo: lOdp), o una constante como wrap_content (se ajusta a su contenido), o fill_parent o 
match_parent (se dimensiona tan grande como su padre se lo permita) 

O También todos tienen la opción de establecer margins (márgenes) 

El ejemplo del árbol de la imagen de la derecha, nos viene 
a decir que las Views que están en el segundo nivel del 
árbol tendrá los atributos del “LinearLayout” que los 
contiene (fíjate que también los tiene el RelativeLayout). Y 
el tercer nivel del árbol, las Views tendrán atributos que 
heredan del padre, que serán propios del “RelativeLayout" 

(y también, date cuenta que no les llegan los atributos del 
LinearLayout que está dos niveles por encima; es decir, 
solo heredan los del padre inmediato) 


LinearLayout 


RelativeLayout 


LayoutParams 


5 LinearLayout. LinearLayout. 

LayoutParams LayoutParams 


View 


View 


View 


RelativeLayout. 

RelatívoLayout. 

RelativeLayout. 


) 


¿Qué tiene en especial el atributo “android:id”? 

Es un atributo global que aparece en todas las Views. Es un identificador único en el árbol. Cuando se compila la 
App este id se referencia como un entero en el fichero R.java para poder ser buscado desde Java. 

Existen dos tipos de id que se pueden definir en XML: 

O android:id="@+id/button_id” : la arroba “@” indica al conversor de XML que lo identifique como un id de 
un recurso. El más “+” significa que es un recurso nuevo que debe ser creado y añadido a los recursos 
(es decir, al fichero “R.java"). Se busca desde Java con: R.id.botonjd 

O android:id="@andro¡d:¡d/empty” : sin el “+” y con android: delante, hace referencia a un id recurso de 
Android. Se busca desde Java con: android.R.ld.empty 
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¿Si tengo que poner los mismos atributos a varias Views, tengo que ponerlos uno a uno en todas? 

No es necesario, para eso están los estilos. Podremos asignar un estilo a una View o a un conjunto de Views, de 
este modo aplicar una serie de atributos que se repitan a las Views que elijamos (como que todos los textos de 
la aplicación sean de color azul). 

¿Para qué sirven los atributos que empiezan con el espacio de nombres “tools” en las Views? 

Únicamente sirven para ayudar a quien diseña el fichero de diseño XML. Lo veremos más adelante. 

Referencias: 

O http://developer.android.com/reference/android/view/ViewGroup.LavoutParams.html 

O http://developer.android.com/guide/topics/ui/themes.html 
O http://developer.android.com/guide/topics/resources/stvle-resource.html 


Atributos para diseñadores en tiempo de diseño tools:xxx 

¿Para qué sirven? 

En los diseños XML, en espacio de nombres reservado “tools” únicamente sirve para guardar información que 
no afectará a las vistas de diseño del usuario, sino están destinadas a facilitar la vida a los diseñadores de los 
ficheros de diseño XML. Además, esta información de la etiqueta “tools” no será empaquetado a la hora de 
ejecutar la aplicación. Es decir, guarda información que no afecta visualmente a las Views en tiempo de 
ejecución (al ejecutar el programa en el emulador o en un dispositivo físico), pero sí en tiempo de diseño 
(mientras, como desarrolladores, diseñamos las vistas en Eclipse o en Android Studio). 


¿Cuál es su espacio de nombres? 

Para utilizarlo hay que declarar el espacio de nombres en la View raíz del fichero de diseño XML. 

|<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" 

xmlns :tools= "http://schemas . android.com/tools" 

android:layout_width= "match_parent" 

android:layout_height= "match_parent " 

tools:context= ”com.jarroba.miapp. MainActivity" > 

<TextView 

android:layout_width= "wrap_content " 
android:layout_height= "wrap_content" 

android:text= "Una texto que debería Lint marcar como Hardcoded r pero no se 
marca por usar tools:ignore con HardcodedText" 
tools:ignore= "HardcodedText" 

/> 

</RelativeLayout> 


Referencias: 

O http://tools.android.com/tech-docs/tools-attributes 
O http://developer.android.com/tools/debugging/improving-w-lint.html 
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O http://tools.android.eom/tips/lavout-designtime-at1:ributes 


¿Cuáles son? 
tools:ignore 

Para que Lint ignore alguna comprobación. Por ejemplo el valor HardcodedText, que se usa para evitar que Lint 
nos recuerde con un Warning (en Eclipse subrayado de amarillo) los textos que introduzcamos directamente y 
no en el fichero “strings.xml” 

<TextView 

android:layout_width= ”wrap_content" 
andróid:layout_height= ”wrap_content" 

android:text = "Una texto que debería Lint marcar como Hardcoded r pero no se marca 
por usar tools:ignore con HardcodedText" 

tools:ignore= "HardcodedText" 

/> 



toolsitargetApi 

Para indicar a partir de cual nivel del API se utilizará la View. Por ejemplo GridLayout, no funcionaría en versiones 
anteriores a la 14. Simplemente es un recordatorio para saber que versión de Android es la mínima que soporta. 

<GridLayout 

android:layout_width= "match_parent" 
android:layout_height= "match_parent " 

tools:targetApi= "ICE_CREAM_SANDWICH" > 

</GridLayout> 


tools:context 

Se pone en la View raíz del fichero de diseño XML, para recordar que Activity la asociará. De este modo el editor 
de diseños podrá poner el tema de la Activity (el cual estará indicado en el AndroidManifest.xml, donde se 
asocia con la Activity, no con el fichero de diseño XML) mientras diseñamos nuestra vista (este tema es solo en 
tiempo de diseño, no el que verá el usuario final). Se puede utilizar el punto como prefijo, al igual que en el 
AndroidManifest.xml 

|<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas . android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 

tools:context =" . MainActivi ■ " > 

</RelativeLayout> 
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En el editor gráfico ¿Existe una manera fácil de asignar esta propiedad? 


Sí, existe la opción de elegir o de cambiar la propiedad en el icono de C en círculo verde (de clase Java). Una 
ventaja de asignarlo, es que podremos abrir directamente desde aquí la Activity que la asociará pulsando 
sobre “Open ActivityQueLaAsociara...”. 


|o) activity_main.xml tí 

i -: Palette 


¿5* Palette 


£>• Form Widgets 



@) ▼ | Q Nexus One ▼ | |Q ▼ | ^ AppTheme 

Sai o 


ÍAb| TextView © LargeText 
|Ab| Médium Text [Ab| Small Text 


@ Button © Small Button 
H ToggleButton (✓) CheckBox 


Jarroba 



▼ | 0 MainActivity £> ▼ | ijpi 19 ▼ 

a 

—[a 

Open MainActivity... 


com.jarrobaJarroba. MainActivity 



i 



tools:layout 

Muy útil para diseñar Fragments. Se pone en la etiqueta <fragment> y se utiliza para recordar que fichero de 
diseño XML se tendrá que dibujar, pero solo para ver cómo queda para el diseñador, no para el usuario. 
Podremos poner cualquiera, no teniendo que corresponder con el del Fragment propiamente, aunque será lo 
más normal. Cuando ejecutemos la aplicación, el diseño se determinará por el que hayamos puesto en el 
onCreateView() 

<fragment 

android:|d= ” @+id/fragment_A” 

android:name= ”com.jarroba . fragmentestaticos.EstaticoFragmentA” 
android:layout_width= " fill_parent" 
android:layout_height= "fill_parent" 
android:layout_weight= ”2” 

tools:layout= ” @layout/disen±o_fragment” /> 


En el editor gráfico ¿Existe una manera fácil de asignar esta propiedad? 


Sí. Seleccionando el Fragment en la vista previa, luego pulsando el botón derecho se nos desplegará el panel 
de opciones. Ahí pulsaremos “Frame Layout” y luego elegiremos el que nos recomienda (Basado en el que 
hayamos asociado en el Fragment en el onCreateView(), por lo que será probable que nos interese) o cualquier 
otro diseño. 


i activrty_mam xml l 

Palette 


*1- Palette 


(ak Form Widgets 



|Ab] TextView Ab Large Text 
lÁbl Médium Text At> Small Text 
(«) Button @ Small Button 
y ToggleButton (¿) CheckBox 
(§) RadioButton 
0 CheckedTextView 
(▼) Spinner 

■ ProgressBar (Large) 

■ ProgressBar (Normal) 

■ ProgressBar (Small) 

■i ProgressBar (Horizontal) 

0 SeekBar 

P QuickContactBadge 
H RadinOrnnn dk R atino Rar 


@5 ▼ | 0 Nexus One ▼ | @ ▼ | AppTheme w 0 MainActivity » 4 ' » | ipi 19 » 

CO □ 0 E 0 [y]E □ El SI 



FragmentEstaticos 


■ 


Edrt ID... 

AJt*Shift»R 

Edit Class... 


Edrt Ñame... 


Layout Width 

► 

Layout Height 

► 

Other Properties 

► 

Fragment Layout *| 

Extract Inelude... 



tools:locale 

Para indicar que un fichero de “strings.xml” corresponde con un idioma y opcionalmente con una región. Útil 
para para indicar que idioma se utilizará en el fichero. 
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<string name= ,r texto_del_ textView">Enqlish text</string> 
</ resources> 


En el editor gráfico aparecen los idiomas ¿Puedo gestionarlos desde aquí? 


No. En el icono del planeta puedes cambiar el idioma para ver cómo se vería en otro idioma, siempre que 
tengas correctamente los ficheros “strings.xml” en la carpeta “res” y en cada carpeta “values-xx” (donde xx 
puede ser “es”, “en”, etc). O incluso, ver una vista previa de cómo se verían todas las vistas a la vez. 


1 activity_main.xml l 

Palette 


Palette 

- 

Form Widgets 



lÁbl TextView (Ab) LargeText 
(Ab) Médium Text @ Small Text 
@ Button @ Small Button 
H ToggleButton (✓) CheckBox 
(•) RadioButton 
(val CheckedTextView 
0 Spinner 

■ ProgressBar (Large) 

■ ProgressBar (Normal) 

■ ProgressBar (Small) 

■ ProgressBar (Horizontal) 
SeekBar 

|0 QuickContactBadge 
CU RadioGroup RatingBar 


1 ^ 

ISEnglish (en) 




▼ Q Nexus One ▼ 

o nn- 


▼ © MainActivity '*■ 


c 

3 iSi19 ^ 


[i 

i English (en) 

1 

“ 

3 Spanish (es) 

1_ 

¡ 

1 French (fr) 

ch (fr) 

\\ Other 


V 

Preview All Locales 



Add NewTranslation... 


J 

J 


Texto en Español. También texto por defecto 
de no encontrar otro 


tools:listitem, tools:listheader, tools:listfooter 

Para llenar de contenido falso al <ListView> y poder ver cómo queda 

<ListView xmlns:android= ”http://schemas . android . com/apk/res/android" 
xmlns:tools= "http://schemas . android.com/tools" 
android:id= "@+id/container” 
android:layout_width= "match_parent" 
android:layout_height= ”match_parent" 
tools:context= "com . jarroba . Jarroba . MainActivity" 
tools:ignore= "MergeRootFrame” 

tools : listitem= "@android:layout/simple_list_item_checked” > 

</ListView> 
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tools:showln 


Se pone en el View raíz del fichero para recordar en que <include> va a ir dibujado. Normalmente en se pone en 
un <merge> que suele utilizarse para incluirse en una etiqueta <include>. Permite apuntar al fichero de diseño 
XML que apuntará a este otro diseño, y en tiempo de diseño éste se incluirá en el exterior del diseño que lo 
rodea 


emerge xmlns:android= "http://schemas . android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= ”match_parent" 
android:layout_height= ”match_parent" 

tools:showIn= "@layout/disenio_que_incluye_con_include" 

> 

</merge> 
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Asociar un diseño (Layout) a un Activity o un 
Fragment 

¿Cómo se asocia un diseño a una Activity en Java? 

Siempre se hace en el método onCreate() del ciclo de vida de la Activity 
(Recuerdo que una clase para ser Acitivity ha de heredar de Activity). Se 
asocia el fichero del diseño XML con el método setContentView() justo 
después de la llamada al padre (justo después del “super”). 

SOverride 

protected void onCreate(Bundle savedlnstanceState) { 

super. onCreate(savedlnstanceState) ; 

setContentView(R.layout. acti vi ty_main ) ; 

} 

Este método setContentViewQ solicita un valor entero. Este valor ha de ser 
un identificador de recurso que apunte a la carpeta “layout” y dentro de esta 
al fichero que queramos asociar, como puede ser “activity_main.xml”. Para 
ello utilizaremos un fichero especial llamado “R”. Por lo que podremos 
llamara nuestro diseño con “R.layout.activity_main” (Daremos esto de 
manera más profunda en el tema de Recursos). 


¿Se asocia igual en un Fragmen en Java? 

En Fragment siempre se hace en el método onCreateView() del ciclo de vida 
del Fragment (Recuerdo que éstas clases heredan de Fragment). Se asocia 
el fichero del diseño XML con el método inflate() del objeto Layoutlnflater. 

Ojo a las diferencias respecto a cómo se asocia un diseño en una Activity y como se asocia en un Fragment. 

El inflateQ no debe adjuntar el diseño al diseño raíz. 



- í3 


& 

sá 

sá 

& 

& 

& 

& 


» 

a 

a 


% 


^lainActivi^avJ 


gen [Generated Java Files] 

Ándroid 4.4.2 

Andró id Prívate Libraries 

as sets 

bin 

libs 

res 

drawable-hdpi 
drawable-ldpi 
£3 drawable-mdpi 
drawable-xhdpi 
£3 drawable-xxhdpi 
layout 


1 


\ q _ fragment_main.xml 
(S? menú 
valúes 

£3 va lúes- vil 
va lúes- vi 4 
£3 values-w£2üdp 
ÁndroidManifest.xml 
ic_launcher-web.png 
proguard-project.txt 
project.properties 
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¿Cómo funciona inflate()? 

Antes de explicar este método, indicar que se utiliza para mucho más que en solo Fragments (también se usa 
con Adapter, Menú, entre otros muchos). Lo explicamos aquí por ser la primera aparición y dejarlo claro. 

También decir, que esta explicación es la visión del autor de este libro (después de años trabajando con ello, de 
haber investigado y deducido una explicación razonable). Ya que en ningún lado parece existir una explicación 
clara o un consenso de qué es lo que hace realmente el método inflateQ -casi ni los propios de Google ya que no 
lo explican de una manera concisa, lo dan por dado. Sin embargo, aquí lo voy a explicar con detalle. 

Una cosa que hay que tener muy clara del método inflate(), que pertenece al objeto de la clase Layoutlnflater, es 
-lo que lleva demasiado a confusión- que inflar no se refiere a insertar unas Views en un ViewGroup, sino a 
poner los atributos de diseño del que podría ser el ViewGroup padre. Aquí seguramente surja la duda ¿Pero si 
cuando inflo se añaden las Views al ViewGroup? Y es que inflateQ aparte de inflar, también tiene la opción de 
adjuntar (adjuntar es un valor añadido a la función inflate(), pero para nada adjuntar se refiere a inflar). 

Veámoslo en un ejemplo. Supongamos que tenemos un diseño que dibuja un texto como el siguiente: 


Ejemplo de código res/layout/adjuntar_en_un_viewgroup.xml 


CLinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
android:id = ”@+id/LinearLayoutl" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:gravity= "center" 
android:orientation= "vertical" > 

CTextView 

android:id= "@+id/textViewl" 

android:layout_width= "wrap_content" 

android:layout_height= "wrap_content" 

android: text= ”@string/otro_fichero_de_dise_o_xml" 

android:textAppearance = ”?android:attr/textAppearanceLarge" /> 


</LinearLayout> 



Y lo que queremos es adjuntar el diseño anterior al RelativeLayout de este otro diseño: 
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Como queremos es que la estructura del primer diseño se adjunte al ViewGroup del segundo diseño (algo 
parecido a lo que se hacía con las Views Merge e Inelude, pero en dinámico, desde Java): 


public class MainActivity extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. fichero_de_disenio) ; 


} 



RelativeLayout contenedor = (RelativeLayout) findViewByld(R.id. RelativeLayout_contenedor ) ; 
Layoutlnflater inflater = Layoutlnflater .from (this) ; 

View laViewInflada = inflater.Ínflate(R.layout. adjuntar_en_un_viewgroup f contenedor, true) ; 


Este código anterior nos da la siguiente estructura de carpetas de ejemplo 
(el código de este ejemplo es un proyecto completo funcional, puedes crear 
un nuevo proyecto probarlo): 


Llegó el momento de tener muy claras las diferencias entre inflar y adjuntar: 


& 

A í3 S 


> $3 

> e* 

> sft 

S» 

> & 
> & 

- & 

> 

> 

> 

> 


geruüenerare^av^Tes] 

Android 4.4.2 

Android Prívate Librarles 

assets 

bin 

libs 

res 

(£> drawable-hdpí 
drawable-ldpi 
(¿3 1 drawable-mdpí 
drawable-xhdpi 
& drawable-xxhdpí 
¡23> layout _ 


| [d adjuntar_en_un_viewgroup.xml I 

|g fichero_de_disenio.xml _ 

> i& menú 
> & valúes 
> & values-vll 
> & values-v14 
> £> values-w820dp 
jg) AndroidManifest.xml 
^ icjauncher-web.png 
[2l proguard-project.txt 
[s] project.propertíes 


O Inflar: Por contra a la intuición, NO infla al ViewGroup contenedor con las Views que le pasamos (el 
fichero de diseño XML que queremos adjuntar al contenedor). Lo que se infla es la nueva jerarquía de 
Views (el diseño) que les pasamos con los atributos de diseño del padre (con los atributos del ViewGroup 


contenedor). Es decir, le decimos a las 
nuevas Views el tamaño que tienen que 
tener para que quepan en el padre, la 
gravedad, entre otros (dependerán del 
ViewGroup que usemos para inflar: 
LinearLayout, FrameLayout, Fragment, 
etc). Es por lo que se deduce que no 
dibuje en pantalla lo inflado y por tanto 
no pueda recibir eventos. 

En el ejemplo, le pasaríamos al método inflate() 
el fichero de diseño de 
“adjuntar_en_un_viewgroup.xml” y el 
RelativeLayout del que será el contenedor (fíjate 
en los parámetros primero y segundo que se le 
pasa al método inflate()). De este modo, se 
infla la estructura de views del fichero con los 
parámetros del contenedor que se le pasan del 
que será el padre y contenedor. 


adjuntar_en_un_viewgroup.xml 


fichero de disenio.xml 



105 


www.Jarroba.com 




































O Adjuntar: añade el nuevo diseño que se 
infló a la ViewGroup y ahora sí lo 
muestra en pantalla y podrá recibir 
eventos. El tercer parámetro del 
método inflate() indica si queremos 
que lo adjunte inmediatamente o no 
(por ejemplo, en Fragment no interesa, 
pues lo hará el propio Fragment en otro 
momento, por eso lo retomamos el 
objeto Layoutlnflater en el método 
onCreteView()). 

Volviendo al ejemplo. El tercer parámetro del 
método inflate() indica si queremos que la 
estructura que antes hinchamos se adjunte al 
contenedor (true) o no (false). 


Adjuntar 


Otro fichero 
de diseño 
XML 


fichero de disenio.xml 


Poner dentro del FrameLayout^ ReiativeLayout 


adjuntar_en_un_viewgroup.xml 



Otro fichero 
de diseño 
XML 


Por lo que después de adjuntar (que no de inflar), a nivel interno nos habrá generado la siguiente estructura que 
el usuario podrá ver y responderá a eventos: 


Ejemplo de código 


CLinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:orientation= "vertical" > 

<Button 

android:id= "@+id/buttonl" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:layout_gravity= "center" 
android:text ="@string/otra view" /> 

<RelativeLayout 

android:id= "@+id/RelativeLayoutl" 
android:layout_width = "1OOdp" 
android:layout_height = "1OOdp" 
android:layout_gravity= "center" 
android:orientation= "vertical" > 

CLinearLayout 

android:id= "@+id/LinearLayoutl" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:gravity= "center" 
android:orientation= "vertical" > 


Botón 


Otro fichero 
de diseño 
XML 


CTextView 

android:id= "@+id/textViewl" 

android:layout_width= "wrap_content" 

android:layout_height= "wrap_content" 

android: text= " @string/otro_fichero_de_dise_o_xml " 

android:textAppearance = "?android:attr/textAppearanceLarge" /> 

</LinearLayout> 

</RelativeLayout> 

</LinearLayout> 


Ya los hemos visto por encima. Ahora definimos los tres parámetros que solicita el método inflateQ (hay otras 
sobrecargas de este método, pero explicamos el de tres parámetros que se suele utilizar más): 

1. Recurso de diseño (resource): La referencia de R del diseño que queramos inflar. 

2. Contenedor raíz (root de tipo ViewGroup): El contenedor cuyos parámetros de su diseño (todos sus 
“android:layout_xxxxx”) inflarán al anterior recurso de diseño indicado en el parámetro anterior. Y si el 


www.Jarroba.com 


106 






























tercer parámetro lo permite con un true, se adjuntará el diseño anterior a este contenedor. Puede 
interesar pasar aquí un “nuil” si no queremos que se infle con ningún parámetro de ningún padre. 

3. Si adjuntar al contenedor que será la raíz (boolean): Si es “true” indica si el diseño (primer parámetro) 
que es inflado por el ViewGroup contenedor (segundo parámetro) debe, además, adjuntar su jerarquía 
de Views a este contenedor. A veces interesa poner este parámetro a “false” porque nos interese solo 
inflar, debido a que se adjuntará lo inflado en otro momento diferente posterior (por eso devuelve una 
View inflada el método inflateQ ); el motivo suele ser que no se cree dos veces el mismo conjunto de 
Views (Como en el método onCreateView() de Fragment, donde se encarga el Fragment de adjuntarlo 
cuando deba; si lo ponemos a “true” nos aparecerá dos veces lo mismo) 

Puede que me haya explayado un poco. Es necesario entender este concepto para no copiar y pegar código sin 
saber qué hace. Además, este método seguro que lo utilizarás en más de una ocasión. 


¿El diseño hecho en un fichero XML para una Actlvlty vale para un Fragment? 

Sí, son intercambiables, se diseñan de igual manera (puede que interese cambiar la colocación de Views, o el 
diseño de una Activity partirlo en varios Fragments). Por el nuevo paradigma de uso de Fragments, recomiendo 
que el diseño (Botones, textos, etc) recaiga sobre los Fragments; y que el fichero de diseño asociado a los 
Activities tan sólo sirva para posicionar a los Fragments en pantalla. 


Referencias: 

O http://iarroba.com/infate-en-android-inflar-v-adiuntar-views/ 

O http://developer.andro¡d.com/reference/android/v¡ew/Lavoutlnflater.html#from(android.content.Contex 

í) 

O http://developer.android.com/guide/components/fragments.html 
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Ejemplo de diseño de Activity con Fragments 


Lo que haremos 

Vamos a crear una aplicación en la que tendremos una Activity que contendrá dos Fragments estáticos simples - 
en un futuro les pondremos funcionalidad- cada uno tendrá un texto y un color. 




Si necesitas repasar como asociar un diseño a una 
Activity de manera simple (en este ejemplo lo 
haremos un poco más a lo grande) echa un vistazo a 
los ejemplos hechos anteriormente. En esos 
ejemplos anteriores, podrás ver como se trata la 
asociación simple de un diseño con una Activity. De 
cualquier manera, en este ejemplo haremos lo 
mismo y más, pues trabajaremos con Fragments. 


Si estás empezando en Android no te recomiendo 
que dediques muchos esfuerzos a trabajar solo con 
Acitivities y sus diseños, ya que ahora todo se basa 
en la arquitectura de Fragments por lo que ya vio. 
Cuanto antes comiences a trabajar con Fragments 
mejor que mejor. Si este leyendo este libro es 


porque quieres aprender a trabajar con Fragments 
intensamente © 


Ilustración 7 - Resultado final de tener una Activity con dos Fragments 


Es muy sencillo, pero tenemos que entender la arquitectura. Para realizar esto necesitamos los diseños 
siguientes: 

O Diseño para la Activity: la cual contendrá dos Fragments 
O Diseño para el Fragment A: un fondo verde 
O Diseño para el Fragment B: un fondo morado 

Fiemos visto que necesitamos una Activity y dos Framents. Pues serán las que tengamos en código Java 
también. La Activity asociará su diseño, y cada Fragment asociará su respectivo diseño. 

Ahora bien, en el diseño de la Activity, como pondremos dos Fragmetns estáticos, los pondremos directamente 
con las etiquetas <fragment>. De este modo, y como los Fragments nunca variarán, podremos indicar en los 
atributos del mismo diseño a que código Java que herede de Fragment irá asociado cada uno (que será el 
encargado de darle funcionalidad). Esto lo haremos mediante el atributo “androidmame”. 

Por tanto y en total, lo que haremos será lo que se muestra en la siguiente figura: 
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Fragment A 


Diseño 
asociado al 
Fragment en su 
onCreateView() 




EstaticoFragmentA.java 


EstaticoFragmentB.java 


Diseño 
asociado al 
Fragment en su 
onCreateView() 




Y finalmente lo 
que el usuario 
vería 


1 1 



EstaticoFragmentA.java 


EstaticoFragmentB.java 

MainActivity.java 


Fragment B 


Ilustración 8 - Trabajar con Fragments estáticos 


Para realizar crear este proyecto recomiendo elegir un mínimo de SDK de: “API 16: Android 4.1 (Jelly Bean)”. 
Ya tenemos todo para empezar a trabajar. 
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Proyecto 


d \¿3 FragmentEstaticos 
á (2$ src 

a ffl com.jarrQba.fragmentestatic os 

> |jJ EstaticoFragmentA.java 

t> \T\ EstaticoFragmentB.java 

> \J] MainActivity.java 
[> §§ ger^Geñeratecnav^iTes] 
t> EÉ Android 4,4.2 

t> Éft, Android Prívate Librari es 
¡¿5? assebs 

> §5? bin 

> @5? libs 


res 

IS? drawable-hdpi 
(S? drawable-ldpi 
& drawable-mdpi 
(S? drawable-xhdpi 
& drawable-xxhdpi 
(Süavout 

¡d activ¡ty_ma¡n,xml 
(d fragment_es.tatico_a.xml 
jd fragment estatico b.xml 


(S? valúes 
(25? values-vll 
values-v14 
[>7 values-wSZOdp 
An d ro i d M a n if est.xm I 
icjauncher-web.png 
proguard-project.txt 
project.properties 
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Diseños para distintos tipos de 
pantallas, y por tanto de 
dispositivos 


¿Tengo que compilar una aplicación para cada tipo de 
pantalla que existe? 


r ~\ 


No, ¡Por el bien de tu yo futuro ni se te ocurra!, 
tendrías el código repetido en un montón de sitios y 
un cambio implicaría cambiarlos todos los proyectos. 


V_ J 



Android nos ayuda con la reutilización del código permitiéndonos, con un mismo proyecto, crear distintos 
diseños para todos los tipos de pantallas que necesitemos. 


Para entender las siguientes preguntas, te recomiendo que repases el tema de Recursos si algo no lo ves claro. 


¿Cuántos tipos de pantalla existen en Android? 

Hoy son finitos, cerca de mil (por decir una cifra aleatoria muy alta sin más base que la intuición). La idea es que 
tiende a infinito. Puede que esta respuesta te parezca extraña, saldrás de dudas en la siguiente pregunta. 


¿A qué nos referimos a tipos o múltiples pantallas? 

Cuando nos dicen múltiples pantallas lo más seguro es que se te venga a la cabeza las pulgadas, es decir, el 
tamaño de la diagonal. Y es cierto, es un factor que establece el tipo de pantalla, pero no el único, dependerá de 
su configuración. Existen cuatro factores determinantes: 

O Tamaño: las pulgadas que tiene la pantalla. 

O Densidad: cantidad de píxeles concentrados en un área. 

O Orientación: si está la pantalla en posición vertical (portrait) u 
horizontal (landscape). 

O Relación de aspecto (Aspect ratio): proporción entre el alto y la 
anchura de la pantalla; es decir, si el rectángulo que describe la 
pantalla está más o menos estirado. 


¿Cómo sabe Android que diseño aplicar a cada tamaño de pantalla? 

Por la carpeta “layout” donde se encuentre el recurso. Siempre dentro de la 
carpeta “res” podremos crear varias carpetas con prefijo “layout” seguido de 
un guión y un prefijo como “land”; quedando “layout-land”. 

Cuando la aplicación se ejecute en un dispositivo, Android informará a la 
aplicación del tipo de pantalla. Entonces buscará los recursos de diseño 
apropiados en la carpeta “layout”, cuyo prefijo cumpla las condiciones. De 
no encontrar una que cumpla las condiciones, o si existe la carpeta no 
tuviera el recurso requerido, siempre buscará en la carpeta que no tiene 
prefijo y se llama “layout. Por lo que siempre ha de existir la carpeta que se 
llama únicamente “layout” con todos los recursos posibles; es decir, es la 
carpeta que se podría llamar “para el resto de los tipos de pantallas” o carpeta por defecto. 


j 3 

> & src 

0 gen [Generated Java Files] 
t> Android 4,4.2 
t> ^ Android Prívate Libraries 
assets 

> bin 

> üj libs 
a res 

> & drawable-hdpi 
& drawable-ldpi 

> & drawable-mdpi 

> £3? drawable-xhdpi 
^^^^drawabl^oíhdDi 

> layout 

> & layout-land 

> £? Iayout-sw720dp 

> values-vll 

> & values-v14 

> £3? values-wS20dp 
|Q AndroidManifest.xml 
IB icjauncher-web.png 
|_¡ proguard-project.tít 
H project.properties 
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¿Cuáles son las configuraciones típicas y las recomendables? 

Debido a que Android puede ser ejecutado en distintos dispositivos, de diferentes tamaños, formas de pantalla y 
densidades, hemos recogido una tabla con los más típicos. 

Indicar que los datos del siguiente cuadro son muy comunes, pero aproximados y pueden variar; recogidos por 
la experiencia e investigación del autor de este libro, para mantener una guía a la que poder acudir en caso de 
duda. 


Dispositivo 

Pulgadas 

Forma 

Densidades típicas 

Carpeta “layout” recomendada 

Reloj 

1 a 3 

Cuadrado o 
círculo 

(Esperando al lanzamiento 
de Android Wareables) 

Por determinar, posiblemente sea 
tamaño inalterable 

Smartphone 

3a 5 

Rectángulo 

alargado 

240x320 Idpi, 320x480 
mdpi, 480x800 hdpi 

layout-sw320dp 

Phablet 

5a 7 

Rectángulo 

alargado 

480x800 mdpi 

layout-sw480dp 

Tablet 

7 a 12 

Proporción 
a urea 

600x1024 mdpi, 

720x1280 mdpi, 

800x1280 mdpi 

Para Tablets 7”: layout-sw600dp 

Para Tablets 10”: layout-sw720dp 

Para generalizar: Iayout-w820dp 

Pantalla de 
ordenador 

12 a 30 

Rectángulo 
alargado o 
proporción 
a urea 

1920x1080 

Por determinar 

Televisión 

30 a 80 

Rectángulo 

alargado 

(Depende de la televisión y 
el reproductor multimedia) 

Por determinar 

Proyector 

80 a 

300 

Rectángulo 

alargado 

(Depende del proyector y el 
reproductor multimedia) 

Por determinar 


Recomiendo mínimo un diseño base en la carpeta “layout” -que servirá para todos- y uno para Tablet (el que 
recomienda Android hoy día es “Iayout-w820dp”). Con estos tendremos cubiertos muchos de los diseños. No 
quita que podamos hacer otros; es más, estará mejor tener los apropiados para la comodidad de uso de la 
aplicación en los diferentes tipos de pantalla. 


¿Existe otra manera de cambiar las pantallas? 

Si no quieres tener varias carpetas “layout” con sufijos, puedes hacer todos los diseños en la carpeta que se 
llama “layout” con diferente nombre. Y en la carpeta “valúes” correspondiente crear un alias. Ya no lo 
recomiendo así por temas de estructuración del proyecto, pero si te interesa, tienes un ejemplo en: 

http://iarroba.com/programar-fragments-fragmentos-en-android/ 


Referencias: 

O http://developer.android.com/guide/practices/screens support.html 
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Ejemplo de diseño para varias pantallas 


Lo que haremos 

Depende de la pantalla que tengamos queremos un diseño u otro. Es decir, podremos querer un diseño 
diferente para Tablets, otro para Smartphones, otro para televisiones, otro para pantallas en modo paisaje 
(lanscape), etc. 

En este ejemplo para simplificar vamos a hacer un diseño para las pantallas cuando están en modo portrait 
(sujetamos el dispositivo en posición vertical) y otra para cuando la pantalla está en landscape (colocando al 
dispositivo en posición horizontal). Cabe decir, que aunque este ejemplo el diseño varíe dependiendo de cómo el 
usuario sujete la pantalla, para hacer lo mismo pero para diferentes tamaños de pantalla como diferenciar entre 
Tablet o Smartphone, se hace exactamente igual, variando los sufijos de la carpeta “layout”. 

Reutilizaremos casi todo el código del ejemplo anterior, aunque podríamos aplicarlo a cualquier diseño que 
queramos y no solo a este que contiene Fragments. 

Queremos que en modo portrait se vea un único Fragment (en la imaginación supondremos que este Fragment 
tiene tantas cosas, que para el usuario le resultaría cómodo manejar un solo Fragment en vez de dos; de algún 
modo llegaríamos al segundo, por ejemplo pulsando un botón) 



Ilustración 9 - Diseño para posición Portrait 

Pero si el usuario colocara el dispositivo en posición landscape, el tamaño sería suficiente como para mostrar 
los dos Fragments (en este caso y en esta posición imaginamos que el contenido de cada Fragment tiene lo 
suficiente como para ser cómodo para el usuario). 



Ilustración 10 - Diseño para posición Landscape 
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Para realizar esto utilizaremos las carpetas "layout" para realizar los múltiples diseños. 

Queremos que exista un diseño para la posición "landscape". Por lo que crearemos una nueva carpeta dentro de 
"res", cuyo nombre será "layout-land" (la creamos o creamos el fichero XML con el elemento que cualifica llamado 
"Orientation" y eligiendo la propiedad "Landscape"). De esta manera le decimos a Android que cuando esté en 
posición "landscape" tome los diseños de esta carpeta. Y si está la pantalla de cualquier otro modo, tomará los 
diseños de la carpeta "layout" (al no tener prefijo la carpeta "layout", estamos indicando que si Android no 
encuentra el diseño en las otras carpetas, busque en esta en último lugar). 


Así crearemos la carpeta "layout-land", a la que crearemos el fichero llamado "activity_main.xml". 



Dentro de la carpeta "layout" crearemos un fichero con el mismo nombre que el anterior, es decir, llamado 
"activity_main.xml". Éste fichero tendrá un código diferente al anterior. 



res/layout 






Fragment A 



De este modo tendremos dos diseños diferenciados para cada tipo de pantalla. Será Android el que se encargue de 
seleccionar el apropiado, dependiendo de la posición pantalla del dispositivo. 
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Proyecto 


i FragmentEstaticosDiferentesPantallas 
a \3 src 


comjarrobaira^mentestatic o s d if erent es p a nta 1 1 a s 
^^stabcoFragmeñtAjáv^ 


> [T] EstaticoFragmentB.java 
C> [T] MainActivity.java 
ge^beñeratecHav?TíTesT 


> ^ Android 4 . 4.2 

t> S& Android Prívate Librarles 
¡¿3? assets 

> & bin 

> libs 
a res 

> & drawable-hdpi 
& drawable-ldpi 

|> & drawable-mdpi 

> (¿3- drawable-xhdpi 

> £> drawable-xxhdpi 

a (^7 la^out _ 


' & 


a activity_main.xml 
Gj fragment_estatico_a.xml 
a fragment_estatico_b.xml 


layout-land 


[> & valúes 

> & values-vll 

> & values-v 14 

> & values-w 820 dp 
[a AndroidManifest.xml 
Hp icjauncher-web.png 
i proguard-project.txt 
[9] project.properties 


Reutilizamos código: El código que no está aquí se encuentra en el ejemplo anterior. 


res/layout/activity_main.xml 


<fragment xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android: id= " @+id/ fragment_A" 

android:name= "com.jarroba.fragmentestaticosdiferentespantallas.EstaticoFragmentA" 

android:layout_width= "match_parent" 

android:layout_height= "match_parent " 

tools:layout= "@layout/fragment_estatico_a" /> 
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Eventos de las Views 


Utilizar las Views desde Java 


¿Cómo encuentro desde Java una View para poder utilizarla en una Actlvity? 

Lo primero que hay que hacer es encontrar nuestra View por su atributo “id” con el método flndV¡ewByld(). Esta 
id la encontraremos mediante el fichero “R.java". 

Un ejemplo para encontrar un TextView puede ser este: 

TextView miTexto = (TextView) findViewByld(R.id. textV±ew_idDelTextV±ewParaUt±lizarEnJava ) ; 


¿Cómo se utiliza el fichero “R.java”? 

Veámoslo con un ejemplo. Para ello vamos a crear un diseño nuevo con un 
TextView. Supongamos que tenemos un diseño que dibuja un texto como el 
siguiente: 


Ejemplo de código de diseño de un LayoutXML llamado 

res/layout/fichero_disenio_ejemplo.xml 


CLinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android: id= "@+id/LinearLayout_contenedorDeMisViews" 

android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:gravity= "center" 
android:orientation= "vertical" 

tools:context= "${packageName}.${activityClass}" > 

CTextView 

android: id= "@+id/textView_idDelTextViewParaUtilizarEnJava" 

android:layout_width= "wrap_content" 

android:layout_height= "wrap_content" 

android:layout_marginTop= "38dp" 

android:text= "@string/un_texto_cualquiera" /> 

</LinearLayout> 


i tii? MisPrimerasViews 
á (3 src 

a 0 comja^bajini¿Drinnera sviews 
t> I^^MainActivi^javJ 
4 j|§ gen [Generated Java Files] 

4 0 com.jarroba.misprimera&views 
ÍT| BuildConfig.java 

> £=& Android 4.4.2 

> Si, Android Prívate Librarles 


Í=L 


¡2? assets 
^5? bin 
^5? libs 


3 drawable-hdpi 
3 drawable-ldpi 
3 drawable-mdpi 
3 drawable-xhdpi 
3 drawable-xxhdpi 
lavout 


G, fichero_d¡sen¡o_ejemplo.xm 
& valúes 
va lúes-vil 
& va lúes-vi 4 
[G| AndroidManifest.xml 
l¡h| ¡cjauncher-web.png 
[P] proguard-project.txt 
[P] project.properties 


Has de hacerte la siguiente pregunta obligada ¿Cómo hago para poder utilizar desde Java los elementos que he 
creado en un fichero XML? Android nos lo facilita al crear automáticamente una clase intermedia llamada 
“R.java” que se encuentra dentro de la carpeta “gen”. Esta clase se actualizará de manera automática cada vez 
que guardemos un fichero XML de los que Android reconozca de los que están en la carpeta “res” (Por cierto, la 
R de “R.java” viene de la primera letra de la palabra recursos en inglé que es Resources, que casualidad que la 
carpeta “res” también). Este fichero “R.java” contendrá el nombre del id que le hemos puesto al elemento XML 
en el atributo “Android:id” y siempre que este empiece por “@+id/”. 

Observa la siguiente imagen, fíjate que el ADT de Android agrupa en “R.java” los ids de las Views del diseño del 
XML dentro de una clase llamada “id” (Recuerda esto para cuando utilicemos findViewByld()). Y que los ficheros 
de XML de la carpeta “layout” también están agrupados dentro de la clase “layout". 
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rM^ava|23 

1©/* AUTO-GENERATED FILE. DO NOT MODIFY.Q 

8 package com.jarroba.misprimerasviews; 

public final class R { 

pnblic static final class attr { 

> 

public static final class drawable { 

public static final int ic_launcher=0x7f020000; 

> 

public static final class id { _ 


I public static final int Li.nearLayout contenedorDeMisVievs=0x7f060000; 

public static final int textyier ic¡DeirextVieyParaUtilÍ2arEnJava=0x7f060001; 


public static final class layout { 


|public static final int fichero_disenio_ejemplo=0x7f030000; | 

} 1 

public static final class string { 

public static final int app_name=0x7f040000; 
public static final int he21o_vorld=0x7f040001; 
public static final int un_texto_cualquiera=0x7f 040002; 

> 



public static final class style { 


Base application theme, dependent on API level. This theme is replaced 
by AppBaseTheme from res/values-vXX/styles.xml on newer devices. 


Theme customizations available in newer API levels can ge 
res/values-vXX/styles.xml, while customizations related 1 
baclcward-compatibility can go here. 


Base application theme for API 11+. This theme completely replaces 
AppBaseTheme from res/values/styles.xml on API 11+ devices. 

42 API 11 theme customizations can go here. 

Base application theme for API 14+. This theme completely replaces 
AppBaseTheme from BOTH res/values/styles.xml and 
res/values-vll/styles.xml on API 14+ devices. 

48 API 14 theme customizations can go here. 

*/ 

public static final int AppBaserheme=0x7f050000; 

/** Application theme. 

All customizations that are NOT specific to a particular API-level can go here. 


public static final int Apprheme=0x7f 050001; 


[O fichero_disen¡o_ejemplo xml £3 

<LinearLayout xmlns : android= "http: //schemas.android.com/apk/res/android" 
xmlns : tools= "htto://schemas.android.com/tools" 

android : id= "@+id/LinearLayout contenedorDeMisVievs 

android : layout_height= "match_parent" 
android : gravity= "center” 
android : orientation= "vertical " 

tools : context="Sfpac)£ageName } . ${activityClass) " > 


and-rold:±d="g+id/textViev_idDelTextVievParaUtilizarEnJava " 

andro^ ^vra^^ontent*^^ 

android:layout_height= "vrap_content" 

android:layout_marginTop= "38dp " 

android:text= "@string/un_texto_cualquiera" /> 


17 </LinearLayout> 


[=§1 Graphical Layout 1 1 ¿| fichero_disenio_ejennplojcml 


* 1¿3 MisPrimerasViews 
4 (3 src 

4 0 com.jarroba.misprimerasviews 
[> U MainActivity.java 
4 3 gen [Generated Java Files] 

4 $ com.jarroba.misprimerasviews 

d ^BuildConfi g .ja va 

roTcRIT!^ - 

Android Prívate Libraries 
& assets 


3 drawable-hdpi 
& drawable-ldpi 
3 drawable-mdpi 
3 drawable-xhdpi 
drawable-xxhdpi 


> 3 valúes 

> & values-vll 

> & values-v14 

[d AndroidManifest.xml 
B.j icjauncher-web.png 
3] proguard-project.txt 
[=| project.properties 



A partir de ahora “R.java” no lo volveremos a abrir nunca y menos tocarlo (como he dicho anteriormente es el 
ADT de Android el que nos lo generará de manera automática; si lo manipulamos, lo más probable es que o bien 
nos empiece a dar errores el proyecto, o que el ADT lo regenere y perdamos todos nuestros cambios). Entender 
cómo se clasifican los identificadores dentro de “R.java” es fundamental para que la programación Android sea 
muy sencilla. 

Ahora queremos llamarlo desde Java para encontrar el fichero de diseño en mediante el método 
setContentView(). Pues como utilizamos cualquier clase en Java empezamos buscándolo primero con el nombre 
de la clase más externa que es “R”; esta clase nos pide un archivo de diseño, con lo que seguiremos 
construyendo la referencia quedándonos “R.layout”; y ahora nos qeuda el nombre del fichero, formando nuestra 
referencia con “R.layout.fichero_disenio_ejemplo”. 

@0verride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 

setContentView(R.layout . fichero_disenio_ejemplo ) ; 

} 


Para encontrar una View la tenemos que encontrar por “id” con el método findViewByld() de la Activity. Este 
método pide el identificador de recurso del “id” de la View de diseño. De manera análoga a la anterior, pero 
buscando una “id” la podremos encontrar con “R.id.XXXX”. Para encontrar la View de nuestro TextView 
usaremos en findViewByldQ el identificador de recurso “R.id.textViewJdDelTextViewParaUtilizarEnJava”. 


@0verride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. fichero_disenio_ejemplo ) ; 


View miView = findViewById(R.id. textView idDelTextViewParaUtilizarEnJava ) ; 
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¿Tengo que acordarme de todos los ¡dentificadores de recurso? 


No hace falta. Un truco de Eclipse es 
la función de autocompletado. Al ir 
escribiendo nos aparecerán las 
diferentes posibilidades y como 
“R.java” es una clase Java, funciona 
exactamente igual que cualquier 
otra. 

Si no aparecen las propuestas al ir 
escribiendo, posicionando el cursor 
de escritura donde queramos que 
aparezcan pulsamos la combinación 
de teclas [Ctrl] + [Espacio] y estás 
aparecerán. 


¿T) *MainAdivityjava ¿l 

1 package com.jarroba.misprimerasviews; 

2 

3 '~‘ import android. app .Activity; 

4 import android.os.Bundle; 

5 import android.view.View; 

6 

n public class MainActivity extends Activity { 

8 

U QOverride 

¡¡¡10 protected void onCreate (Bundle savedlnstanceState) { 

Sil super. onCreate(savedlnstanceState); 

12 setContentView (R. layout. fichero_di.senio_e.jemplc>) ; 


View miView = findViewByld(R.id^); 


^^nea^vou^ontenedorOeMisView^n^^jic^^ 

^ F textV¡ew_¡dDelTextV¡ewParaUt¡l¡zarEnJava : ¡nt - R 

o 3 class : Class<com.jarroba.m¡spr¡merasv¡ews.R.¡d> 

this 

Pres s 'Ctr^jj ace' to show Témplate Proposals 


Todavía no podemos utilizar nuestro TextView, lee la siguiente pregunta. 


¿Ya puedo utilizar mi View después de llamar al método findViewByldO? 

TextView, Button, RadioButton, CheckBox, LinearLayout, etc heredan todos de View. El método findViewByldO 
devuelve una View. Para poder utilizar uno de ellos tenemos que realizar un cast al tipo apropiado. 

El anterior ejemplo, si queremos usar nuestro TextView, tenemos que castearlo al tipo TextView de la siguiente 
manera (en este Eclipse nos pedirá importar “android.widget.TextView"): 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. fichero_disenio_ejemplo ) ; 

View miView = findViewByld(R.id. textView_idDelTextViewParaUtilizarEnJava) ; 
TextView miTexto = (TextView) miView; 

} 


Ahora sí que lo podríamos utilizar el TextView para lo que queramos desde Java. Como cambiar el texto, 
modificar los colores, ocultarlo, añadirle animaciones, etc. 

Para que en futuro sea más directo puedes simplificar lo anterior a esto: 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. fichero_disenio_ejemplo ) ; 

TextView miTexto = (TextView) findViewByld(R.id . textView idDelTextViewParaUtilizarEnJava ) ; 


Es importante saber que encontrar Views hay que hacerlo después de asociar el fichero de diseño completo a la 
Activity (es decir, después del método setContentView()). Y que la View que busquemos ha de estar en este 
fichero asociado con la Activity con la que trabajemos. De otra forma, dará error. 

Se recomienda buscar las Views en el onCreateQ y asignarlas a variables globales (en el ejemplo anterior son 
locales; recomiendo convertir a la variables de las Views a globales para poder llamarlas desde otras partes del 
ciclo de vida de la Activity). 
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¿Y si no me reconoce el "id” de la View porque no se actualiza el fichero “R.java”? 

Remarco lo de que el fichero “R.java” se actualizará cuando guardemos los ficheros de recurso XML. 

Este problema suele ser muy frustrante cuando empezamos a programar con Android. Y es tan fácil de corregir, 
con solo pulsar sobre el botón de “Save All” (guardar todo), para que se guarde nuestro diseño XML 


¿Y ahora como hago algo con la View? 

Muy sencillo, ya solo tenemos que buscar entre todos los métodos que nos ofrece la propia View. 

Por ejemplo cambiar el texto desde Java. 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState) ; 
setContentView(R.layout. fichero_disenio_ejemplo ) ; 

TextView miTexto = (TextView) findViewByld(R.id. textView_idDelTextViewParaUtilizarEnJava) ; 

miTexto.setText( "El texto cambiado desde Java") ; 

} 

Para verlos todos con su descripción de lo que hacen, o nos vamos a la documentación de Android 

(http://develoDer.android.com/reference/Dackages.html) . o como lo miramos en las sugerencias como se 
comentó en el anterior cuadro de nota azul que explica como mostrar las propuestas para autocompletar. 


¿Android debe de tener recursos internos que pueda 
reutilizar? 

Puede que nos guste algún recurso de Android que ya 
tenga definido. Para ello existe otro fichero “R.java” 
dentro de la biblioteca “android.jar” en el paquete 
“android”. 

Imaginemos que queremos llamar a un color que ya 
tenga definida esta biblioteca. En vez de empezar por 
“R.color.XXX” que llamaría al “R.java” de la carpeta “gen”, es decir, el de nuestro proyecto, lo llamaríamos de 
este modo “Android.R.color.XXX”. 

Por ejemplo, supongamos que queremos poner el texto de nuestro TextView de color verde luminoso que 
Android lo tiene llamado “holo_green_light”. 


a MisPrimera&Views 

> & &rc 

> §§ gen [Generated Java Files] 
a Android 4.4.2 

a andró id.jar - D :\ An d ro i d\ ID E\ s d kVp I atf o rm s\a n d ro i d -1 9 

a 0 android 

• fijk Manifest.class 

androidTaccessibilityservice 


QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState) ; 
setContentView(R.layout. fichero_disenio_ejemplo ) ; 

TextView miTexto = (TextView) findViewByld(R.id. textView_idDelTextViewParaUtilizarEnJava) ; 

int colorElegido = getResources().getColor (android.R.color . holo_green_light ) ; 
miTexto.setTextColor(colorElegido); 

} 


Siempre que podamos, lo mejor es utilizar estos recursos, pues nos agilizará el trabajo y el proyecto ocupará 
menos que si tuviéramos que definirlos. Existen muchos recursos ya definidos por Android diferentes, desde 
ficheros de diseño XML hasta Strings, iremos viendo algunos a lo largo del libro. 
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¿Cómo encuentro desde Java una View para poder utilizarla en un Fragment? 

Parecido a como se hace desde una Activity, pero con unos ligeros retoques. 

En Fragment no existe el método setContentView(). Como vimos, el fichero de diseño XML se asocia a una 
Activity desde el método del ciclo de vida onCreateView(). 

Se pueden buscar las Views en el mismo método onCreateViewQ, justo después del inflado. 

Para ello buscaremos la View mediante su id con el mismo método findViewByld(). Para ello tenemos que utilizar 
la View que inflamos previamente, que en este ejemplo hemos llamado “rootView”. 

@Overr±de 

public View onCreateView(Layoutlnflater inflater, ViewGroup container,Bundle savedlnstanceState) { 

View rootView = inflater.Ínflate(R.layout. fichero_disenio_ejemplo, container, false) ; 

TextView miTexto = (TextView) rootView.findViewById(R.id. textView_idDelTextViewParaUtilizarEnJava ) ; 

return rootView; 

} 

Cabe mencionar que, la idea es que las variables de las Views que busquemos aquí las pongamos como 
globales. Por ello hay que tener cuidado en que parte del ciclo de vida utilizamos luego estas variables. Si te fijas 
en el ciclo de vida, si quisiéramos utilizar estas variables, por ejemplo, en el método onAttach() -como se ejecuta 
antes que el método onCreateView()- nos dará un error de puntero a nuil; debido a que no se habrá llamado 
todavía al método findViewByldQ que busca la View. Lo mismo pasaría si quisiéramos utilizar una View 
previamente buscada en el método onDetachQ, que ya habría sido destruida la View con antelación, dando un 
nuil. Queriendo decir con esto, que hay que utilizar la View en los métodos de después del adjuntado, pero antes 
de la destrucción. 


¿Qué patrón de diseño se recomienda seguir para trabajar con las interfaces de usuario en Android? 

Podremos elegir el patrón de diseño que más nos convenga. Los más comunes son o Modelo-Vista-Controlador 
(MVC) o Modelo-Vista-Presentador (MVP). 

Estos patrones de diseño son concretamente patrones arquitectónicos ya que ofrecen una arquitectura para la 
creación de cualquier proyecto Android, indicando como pueden ser relacionadas sus partes (vistas, lógicas, etc) 
y por tanto utilizados. 


¿Y cuál me recomiendas utilizar? 

Para Android recomiendo utilizar el patrón MVP. El patrón MVP funciona parecido al MVC (Modelo-Vista- 
Controlador), pero con la diferencia de no existir una relación directa entre el Modelo y la Vista. Toda 
comunicación ha de pasar necesariamente por el Presentador. 
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Usuario 


Ve la vista 

Por ejemplo, ve un 
botón en la pantalla en el 
que pone "Consultar" 

* 


Usa el controlador 

Por ejempb, al pulsar el botón 
se llama al controlador mediante 
un Callbackcomo onClick() 
para que controle la acción 



Hace que la lógica del 
ograma sea entendióle 


programa sea entena ib 
para un usuario en 
forma de interfaz de 


Selecciona una vista 

Si la acción del usuario requiere seleccionar una vista nueva. 

I Por ejempb, hacer que el botón quede deshabilitado, mostrar una barra de carga, 
o la información obtenida del modelo de manera que el usuario la pueda entender 


Presentador 

Contiene la lógica de la 
aplicación (Por ejempb, 
responde a eventos) 

Controlador.java _ 

Que hereda de 
Activity o 
Fragment 



Manipula al modelo 

Al realizar alguna solicitud sobre la información, cambia el estado al modeb. 
Por ejempb, al pulsar el botón se llama al modelo para que 
vuelva a leer de la base de datos para actualizar los datos 


Modelo 

Representación de la 
información. 


Actualiza la información de la vista cuando hay cambios en los datos 

Es el controlador quien dice donde colocar cada dato en la vista. 

Por ejempb, para que muestre en el lugar correcto bs datos al usuario 


Modelo, java 

Como una dase 
POJO (sob tiene 
variables con 


gettersy setters) 



Algo buscado A 


Algo buscado B 


Algo buscado C 


Algo buscado D 


Algo buscado E 




Aunque aquí recomendemos el patrón MVP por facilidad junto con la arquitectura de Android. Pero nada te 
prohíbe que utilices el MVC. 


¿Cómo seguir al patrón MVP? 

Aquí la lógica radica en que en Android solo se manejan las 
Vistas (los ficheros de diseño de la carpeta “res/layout”) 
desde las Activities y los Fragmetns que actuarían de 
presentadores. Y el modelo de datos, por limpieza de código 
y reusabilidad se suele poner en ficheros aparte. 

Ya hemos visto cómo utilizar las Views desde Android y 
Fragment. De este patrón MVP solo nos quedaría el Modelo. 
Lo veremos más adelante con el tratamiento de datos. 

Para que te hagas una idea rápida, podríamos seguir una 
estructura de ficheros como en la imagen adyacente. 


Referencias: 


s MVP 


fe sn 

BaseOeDatos.java 
17) UnaCalsePo>o.ieva 


; 


| com.jarroba.mvp.presentador 

[7) MainActivity.jova 

Wk AndroKJ 4.4.2 
Uk Android Prívate libranes 
m* as sets 

te» libs 
ti 

:> & drewable-hdpi 
drewable-ldpi 
t> & drawable-mdpi 
:• «r- drewable-xhdpi 
i» drawable-mhdpi 




layout 

O vista.activityjcml 


0 fe valúes 
> fe valúes-vil 
» fe values-v14 
t> fe values-w820dp 
AndroidManifest.iml 
fe K_launcber-web.png 
D proguard-project.txt 
Q project.properties 


P l Moddi^^ 


^1 Usuario 



O http://es.wikipedia.org/wiki/Modelo Vista Controlador 


O http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter 


O http://stackoverflow.com/auestions/4916209/which-design-patterns-are-used-on- 

android/6770903#6770903 
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Ejemplo de controlar las Views (por tanto diseños) desde Java 


Lo que haremos 

La Activity tendrá un diseño XML con un único texto inicial. Este texto lo cambiaremos por otro, le pondremos un 
fondo verde y lo rotaremos 45°. Haremos las cosas bien y los textos los crearemos directamente sobre el fichero 
“va I ues/stri ngs.xm I ” 

Nada más cargar la aplicación nos mostrará esta imagen. 



Ilustración 11 - En el instante de arrancar. Pasa tan rápido que es imperceptible para el ojo humano 

Aunque nunca la llegaremos a ver pues desde Java cambia muy rápido a la siguiente. 



Ilustración 12 - Después de aplicar los cambios desde Java 


123 


www.Jarroba.com 


Proyecto 


i MisPrimerasViews 
a src 

a ^^omjarrobajTnisDnr^rasviews 
| [7) MainActivity.java | 

0 & ge^Señerate^av^fTes] 

D Android 4.4.2 
0 Android Prívate Librarles 
& assets 
t> Üb> bin 
t> & libs 
a res 

l> ^ drawable-hdpi 
& drawable-ldpi 
t> t¿p drawable-mdpi 
> (c> drawable-xhdpi 
t> drawable-xxhdpi 

' £ |—^-—- 1 

§q fichero_disenio_ejemplo.xml| 

j valúes 

<n styles.xml 
t> values-vll 

|> £> values-v14 
^ AndroidManifest.xml 
fcl icjauncher-web.png 
[=) proguard-project.txt 
[#) project.properties 
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Drawable (Dibujable) 


Drawable 


a ¿7 Imágenes 
* & src 

a com.ramón.imágenes 


¿Qué es? 


Es un recurso que puede ser dibujado en pantalla. Se encuentran en 
Se encuentra en la carpeta “res”, dentro de alguna carpeta 
“drawable” 


> [T) MainActivity.java 


l> gen [Generated Java Files] 
Android 4.3 

ah Android Prívate Librarles 


Si creo una imagen de tipo png con un programa de edición de 
imágenes como Gimp o Photoshop ¿Cuántas imágenes tengo que 
hacer? 



& drawable-hdpi 


Funcionar funciona con una, ya que Android buscará la imagen a la 
que se haga referencia en cualquier carpeta “drawable” que más se 
acerque a las especificaciones de pantalla del dispositivo. 


& drawable-ldpi 
> drawable-mdpi 
C> £? drawable-xhdpi 
[> 0 ? drawable-aihdpi 


Para hacer las cosas bien habría que hacer una para cada carpeta 
“drawable”, atendiendo a las densidades. Es mejor así, ya que 

cambiar el tamaño de una imagen en tiempo de ejecución consume muchos recursos que podría notar el 
usuario (consumo de batería, agotamiento de la memoria, lentitud de respuesta). Además, las funciones de 
escalado eliminan píxeles de la imagen, o añaden píxeles inventados; por lo que genera una imagen de mala 
calidad o borrosa. Lo mejor es tener una imagen para cada carpeta de las densidades recomendadas (una 
excepción es la carpeta “drawable-ldpi”, a la que no hace falta poner imagen, ya que cambio de tamaño hacia 
abajo y debido a su pequeño tamaño, no se notan los efectos negativos antes citados) 


¿Sólo se guardan imágenes png, jpg o gif en estas carpetas? 

No solo esas, sino que podemos guardar ciertos ficheros XML que definan imágenes, como veremos a 
continuación. 


¿Las imágenes que guarde en las carpetas drawable permanecerán inalteradas? 

Toda imagen guardada en la carpeta “res/drawable” será optimizada y comprimida. Si se quiere evitar la 
optimización hay que colocarla en la carpeta “res/raw”. 


¿Qué tipos de imágenes se pueden guardar en las carpetas Drawable? 

O Bitmap: imagen con extensión png, jpg o gif 

O 9-path: png con regiones que se pueden estirar según el tamaño del contenido sin deformar ciertas 
áreas 

O Layer List: XML que controla una colección de Drawables a modo de capas 
O State List: XML que referencia diferentes ficheros Bitmaps para diferentes estados 
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O Level List: XML que define un drawable que maneja un número de Drawables alternativos 
O Transition Drawable: XML que define un drawable que puede fundirse entre dos drawables 
O Inset Drawable: XML que define un drawable que inserta en otro drawable a una distancia específica. 

Útil para repetir una imagen varias veces en un fondo 
O Clip Drawable: XML que define un drawable que se engancha a otro, basado en su valor de nivel actual 
O Scale Drawable: XML que define un drawable que cambia de tamaño de otro, basado en su valor de 
nivel actual 

O Shap Drawable: XML que define una figura geométrica, incluido color y gradientes 


Referencias: 

O http://developer.android.com/guide/topics/ resources/drawable-resource.html 

O http://developer.android.com/guide/topics/graphics/2d-graphics.html 
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Bitmap (Imagen o mapa de bits) 

¿Qué es? 

Es una imagen en formato compatible como png, jpg o gif. Se recomienda png. 

¿Para qué se usa? 

Para cualquier texto que no vaya a ser modificado durante la ejecución de la 
aplicación 


¿Cómo se obtiene? 

Se puede usar en cualquier View que permita imágenes (propiedad “src”) o 
fondos (propiedad “background”), como ImageView, Button, TextView, etc 

O En los recursos XML con: @drawable/imagen 

CImageView 

android:id = ”@+id/imageView_imagen 
android:layout_width= ”wrap_content” 
android:layout_height= "wrap_content " 
android:layout_alignParentTop= "true" 
android:layout_centerHorizontal= "true" 
android:layout_marginTop= ” 41 dp" 

android:src= "@drawable/jarroba" /> 

O En Java con: getResourcesQ.getDrawable(R.drawable.imagen) 



Drawable milmagen = getResources().getDrawable(R.drawable . jarroba ) ; 

ImageView iv = (ImageView) findViewByld(R.id. imageView_imagen ) ; 
iv. setlmageDrawable (milmagen) ; 


¿Cómo añado una imagen a alguna carpeta “drawable” del proyecto? 

Vale con arrastrarla a la carpeta “drawable” adecuada. Solo asegúrate de una cosa, que el nombre de la imagen 
esté bien formado (sino dará errores y no se autogenerarán los identificadores en el fichero “R.java”). Es decir, 
que las letras sean minúsculas, sin caracteres raros (solo se permiten guiones bajos y el símbolo del dólar 
y que la extensión sea correcta como “.png” 


T 


□ 


0 


© 


Favoritos 
Descargas 
Dropbox 
■ Escritorio 
^ Sitios recientes 
4 SkyOrtve 

y* Bibliotecas 
•I Documentos 


6 


Nueva 

carpeta 


GQ. 


\J 

Propiedades 


Buscar en Nueva carpeta 



ile Edit Refactor Source Navigate Search Project 

fi - Jdj v * - O 

í Pacfcage Explorer 10 ^ ^ a □ 

é • miApp * 

t> src 

> ¿9 gen [Generated Java Files] 

t> Wk Android 43 
Wk Android Private Librarles 
¿y assets 

> bin 

> libs 

s res 

fiy drawable-hdpi 
(¿y drawable-ldpi 
i le 1 - drawable-mdpi 

icjauncher.png 
■ki jarroba.png 
fiy drawable-xhdpi 
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9-patch (Nueve partes) 

¿Qué es? 

Es una imagen en formato png con regiones que se pueden estirar según tamaño del contenido, sin deformar 
las esquinas. Se llama nueve partes (9-patch) porque dividiremos la imagen en nueve partes, unas que se 
podrán estirar y otras que no. 


¿Para qué se usa? 

Normalmente para botones, en los que va a ir un texto de tamaño desconocido dentro, y queremos que esté 
siempre dentro del botón, con lo que la imagen se ajustará sin deformar las partes que no queremos que se 
deformen. 


¿Cómo se obtiene? 

Tanto en Java como en XML de la misma manera que en Bitmap 


¿Hay alguna manera sencilla de crear una imagen 9-pach? 

Sí, con el editor de imágenes 9-patch que trae el SDK de 
Android y que se encuentra en “\IDE\sdk\tools”, aquí 
ejecutaremos el “draw9patch.bat”. 

El programa se inicia pidiéndonos una imagen. 
Arrastraremos la imagen que queramos convertirá 9-patch 


¿En qué consta el editor de imágenes 9-pach? 


Después de arrastrar a la imagen, cargará y podremos editar 
las nueve partes de una manera muy sencilla. El editor se 
divide en: 

1. Editor: Veremos nuestra imagen en grande a la derecha, 
donde podremos editar las partes 

2. Vista previa: Aparece también en la vertical nuestra 
imagen tres veces, esta parte es solo una vista previa de 
cómo quedará (vista previa de si se estirara verticalmente, 
horizontalmente, o en los dos). 

3. Controles: Los controles de nuestro editor (están descrita 
su funcionalidad en la siguiente pregunta) 




¿Para qué sirven los controles del editor de imágenes 9-pach? 

O Zoom: Ajusta el nivel del zoom en el área de dibujo 

O Patch scale: Ajusta el nivel del zoom en el área de la vista previa 

O Show lock: Visualiza las áreas no dibujables al pasar el cursor del ratón por encima 

O Show patches: Mostrar las partes que se podrán estirar del área de la imagen (La parte de color rosa se 
podrá estirar tanto a lo ancho como a lo alto, las partes verdes de izquierda y derecha tan solo se podrán 
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estirar a lo alto, las partes verdes de arriba y abajo solo se pondrán estirar a lo ancho, y las partes sin 
área de color no se estirarán). 

O Show content: Mostrar en morado el área donde se permitirá el contenido en la vista previa 

O Show bad patches: Añade un borde rojo alrededor de las áreas de los parches que podrían producir 
defectos en la imagen cuando se estire. Se verá siempre bien si no existen áreas rojas 


¿Cómo se utiliza el editor de imágenes 9-pach? 


800% O Show bdk Q Show contení 

6x | [V| Show patches! 


Antes de nada, para ver con mayor claridad cómo quedarán las nueve partes, 
recomiendo seleccionar la casilla “Show patches”. 


Ahora, si nos vamos al editor con el cursor del ratón y lo ponemos 
sobre uno de los cuatro lados de la imagen y tiramos hacia dentro 
estaremos indicando lo que no queremos que se deforme de 
nuestra imagen. Por ejemplo, si queremos estrechar las partes 
verticales de la imagen, bastará con seleccionar desde el borde 
izquierdo o derecho de la imagen y arrastrar a la posición que 
queramos que no sea modificada. En la siguiente imagen de 
ejemplo, queremos que no se deforme ni las esquinas de la 
izquierda, ni la imagen que hay en ella (el logotipo de Jarroba); 
pues arrastramos para cubrir las esquinas con el logo soltamos. 

De este modo veremos cómo se nos habrá quedado una parte 
rosa y otra verde. Cuando terminemos de definir las nueve partes 
de la imagen tendremos las siguientes con sus significados: 



O 1 Parte rosa: se podrá estirar tanto a lo ancho como a lo alto, 


O 4 Partes verdes: las partes verdes de izquierda y derecha tan solo se podrán estirar a lo alto; las de 
arriba y abajo solo se pondrán estirar a lo ancho, y las partes sin área de color no se estirarán 

O 4 Partes sin color: estas zonas en las esquinas de la imagen indicarán lo que no se deformará 


Por lo que la imagen deformará el logotipo de Jarroba en la 
horizontal (en la imagen superior, si miramos primera vista 
previa, el logo queda aplastado horizontalmente). 


Lo arreglamos al desplazar el borde inferior de la imagen. Por lo 
que veremos la parte sin sobrexponer ni el rosa ni el verde, lo 
que indicará que no se deformará esa parte de la imagen. Echa 
un vistazo a la siguiente captura y en especial a su vista previa, 
como no se deforma el logotipo de Jarroba. 


Para terminar 
guardaremos la 
imagen en “File” y en 
“Save 9-patch...” 


Tan solo quedarán por definir desde el borde superior y derecho 
de la imagen. 
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¿Por qué le salen rayas negras a mi imagen 9-patch en los bordes? 

Mientras la editábamos y al abrir la imagen 9-patch podremos ver como el editor 
nos ha generado unas líneas negras a los bordes de la imagen. Estas líneas 
indicarán a Android las partes que no queremos que deforme. Podríamos haber 
hecho estas líneas negras con un editor de imágenes, pero habría que tener 
cuidado de hacerlas sobre un píxel de fondo transparente y cuando guardáramos 
la imagen con extensión “,9.png” (todo esto nos lo ahorramos si utilizamos el 
editor 9-patch incluido en el SDK de Android). 



w 

4 


¿Cómo uso una imagen con extensión “.9.png”? 

Exactamente igual que las imágenes bitmap. 

Un ejemplo rápido es en un diseño en XML, añadir un “TextView”, y poner de fondo el “android:background”. 

<TextView 

android: id= " @+±d/textViewl " 
android:layout_width= ”wrap_content " 
android:layout_height= "wrap_content" 

android:background= " @drawable/boton_normal " 

android:paddingBottom= "90dp " 
android:paddingLef t= "1Odp" 
android:paddingRight= "1Odp" 
android:paddingTop= "50dp" 

android : text= "www.Jarroba.com la web de informática técnica 
avanzada, que va un paso más allá del entendimiento más profundo 
del arte de la informática " 

android : textAppearance= "?android:attr/textAppearanceMedium" /> 

Le pondremos un texto largo para ver en el mismo editor que se deforma de la imagen y que se mantiene sin 
deformarse (le aplico un padding para que el texto quede colocado en la imagen). En este ejemplo veremos que 
las esquinas y los logos no se deformarán, pero lo que es el cuerpo sí, justo como queríamos. 

j 

www.Jarraba.com la web de Informática técnica 
avanzada, que va un paso más allá del entendimiento 
más profundo del arte de la Informática 

Jugando con el padding podremos ver qué ocurre cuando el texto se recoloca dentro del TextView. El siguiente 
ejemplo le damos más padding por la izquierda y la derecha para que el texto se coloque en una alta columna: 

www.Jarroba. 
com la web de 
informática 
técnica 
avanzada, que 
va un paso 
más allá del 
entendimiento 
más profundo 
del arte de la 
informática 


Referencias: 

O http://developer.android.com/tools/help/draw9patch.html 
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State List (Lista de estados) 

¿Qué es? 

Es un XML que referencia diferentes ficheros Bitmaps para diferentes estados definidos en una lista 


¿Para qué se usa? 

Por ejemplo, para cada estado del botón: pulsado, enfocado, reposo, etc 


¿Cómo se define un XML de State List? 


Se crea un nuevo XML en la carpeta “drawable” de tipo “selector” 


En este fichero añadiremos elementos (<ítem/>). Cada uno tendrá 
dos atributos, uno que diferenciará el estado y otro que indicará la 
imagen que queremos que se le muestre al usuario cuando esté la 
View en dicho estado. En el siguiente código hemos definido tres 
estados (aunque hay muchos más) y para cada uno una imagen: 



O Botón pulsado: para cuando el usuario pulse el botón 

O Botón enfocado: para cuando el usuario seleccione el 
botón con un cursor 




O Botón en cualquier otro estado: lo usaremos para cuando el botón esté en reposo 


<?xml versión ="1.0" encoding= "utf-8 "?> 

<selector xmlns:andrói d= "http://schemas.andró id . com/apk/res/android"> 
citem andróid:state_pressed= "true" 

android:dravrable="@drawable/boton_pulsado" /> <!-- pulsado --> 
citem andróid:state_focused= "true " 

android:drawable= "@drawable/boton_enfocado" /> <!-- enfocado --> 
citem android:drawable= "@drawable/boton_normal ” /> c!-- por defecto, el botón 
normal en estado de reposo --> 
c/selector> 


¿Cómo uso una imagen State List? 

Exactamente igual que un Bitmap. 

Un ejemplo rápido es en un diseño en XML, añadir un “Button”, y poner de fondo el “android:background” el 
XML del State List que hemos definido. 

CButton 

android: id= "@+id/button_miboton" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 

android:background= "@drawable/fichero_state_l±st" 

android:text ="Un boton" /> 
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Shap Drawable (Dibujable de forma) 

¿Qué es? 

Es un XML que define una figura geométrica, incluido colores y gradientes. Se podría diseñar una imagen normal 
con una herramienta de dibujo como Gimp o Photoshop; sin embargo, al definirlo en XML no perdería calidad y 
se dibujaría siempre la imagen completa. Un ejemplo, si queremos que la imagen se componga de un borde de 
línea discontinua, y cada línea no tenga más de unos píxeles de tamaño; si lo hiciéramos con un png la línea 
punteada deformaría sus trozos estirándolos, al diseñar una forma conseguimos que todas las líneas sean 
pequeñas 


¿Para qué se usa? 

Se suele utilizar para crear fondos de Views; por ejemplo, para el fondo de un botón o de un EditText 
personalizado. O para líneas de separación de listados por ejemplo. Aunque también para lo que queramos. 

No podremos crear cualquier dibujo que queramos, solo las formas de línea, de rectángulo (incluye cuadrado), 
de óvalo (incluye círculo) y de anillo 


¿Cómo determino su tamaño? 

Al asignarse a una View (por ejemplo como fondo), estas figuras es expandirán horizontal y verticalmente hasta 
ocupar toda la View (salvo la línea, que se extiende solo a lo largo) 


¿Puedo ver la Shape Drawable mientras lo diseño? 

Sí, si lo asignas en algún diseño en XML, como en el fondo de un botón. Cada vez que guardes la forma se 
actualizará en la vista previa del diseñador de Layouts XML. No todos los parámetros se pueden ver 



¿Cómo se define un XML de State List? 

Se crea un nuevo XML en la carpeta “drawable” de tipo “shape” 

Veremos ejemplos de cómo se define en XML en la siguiente 
pregunta: 
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¿Qué se puede definir en una Shape Drawable? 

Normalmente se utiliza para crear formas como líneas, rectángulos (con ello cuadrados), óvalos (con esto 
círculos) o anillos. Primero definiremos la figura que dibujaremos entre: 


Forma 

Ejemplo 

Información 

Rectángulo 

(rectángulo) 

■ 

Jugando con los valores se consigue la forma de cuadrado 

Oval (óvalo) 

• 

Jugando con los valores se consigue la forma de círculo 

Une (línea) 

— 

No tiene cuerpo, es todo borde (requiere usar <stroke>) 

Ring (Anillo) 

O 

Cabe notar que el cuerpo tiene forma de anillo (el centro de la 
figura está vacía). Y tiene dos bordes: uno interior y otro exterior 


Se pueden asignar los siguientes parámetros (a continuación de cada uno, un ejemplo en cada cuadro amarillo): 
O Solid (Sólido): Un color sólido para rellenar el cuerpo de la figura 

<?xml versión =”1.0" encoding = "utf-8"?> 

<shape xmlns:android= "http://schemas.android.com/apk/res/android" 
android:shape= "oval" > 

<solid android:color ="#FFOOOOFF" /> 

</ shape> 



O Córner (Esquina): básicamente es redondear la esquina de un rectángulo. Todas las medidas se definen 
en dp, siendo Odp sin esquinas redondeadas. 



Desde Odp 


Para visualizar requiere la 
ejecución desde un 
dispositivo o emulador 

Para visualizar requiere la 
ejecución desde un 
dispositivo o emulador 

Para visualizar requiere la 
ejecución desde un 
dispositivo o emulador 


<?xml version= "1.0" encod±nq="utf-8"?> 

<shape xmlns:android= "http://schemas.android.com/apk/res/android" 
android:shape= "rectangle" > 

<solid android:color ="#FF0000FF" /> 

_ B orners 

android:bottomLeftRadius= "5Odp" 
android:topRightRadius= "50dp" /> 

</ shape> 
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O Gradient (Gradiente o degradado de colores): 


Atributo 

Definición 


Ejemplo 

Valor 

Información 

startColor 

Color inicial 




Color #AARRGGBB o 
recurso de color 


centerColor 

Color central 




Color #AARRGGBB o 
recurso de color 


endColor 

Color final 




Color #AARRGGBB o 
recurso de color 


angle 

Ángulo de 
inclinación del 
degradado 




De 0 a 359 grados 


centerX 

Desplazamiento 
horizontal del 
centro 

0 

I.o 0.5 IX 

) 

0.0 (izquierda) a 1.0 
(derecha) 

También se 
puede aplicar 
para desplazar 
al tipo linear 
horizontalmente 

centerY 

Desplazamiento 
vertical del 
centro 

a 

I 

0.0 (arriba) a 1.0 
(abajo) 

También se 
puede aplicar 
para desplazar 
al tipo linear 
verticalmente 

gradientRadius 

Radio del 
gradiente para 
el tipo radial 


0» 


Desde 0.0 (todo 
concentrado en el 
centro) 

Es obligatorio su 
uso en el tipo 
radial. En el 
resto de tipos no 
se aplica 

type 

Tipo del 
gradiente 

Linear: Radial: 

Sweep: 

1 

Puede ser: 

linear: gradiente lineal 
radial: gradiente radial 
cuyo color central es el 
color inicial 
sweep: abanico de 
colores, empieza en un 
color y termina en un 
giro pegado al primero 



<?xml versión ="1.0" encodinq="utf-8"?> 

<shape xmlns:android= "http://schemas.android.com/apk/res/android" 
android:shape= "rectangle" > 

<gradient 

android:type= "radial" 
android:startColor= "#FFOOFFOO" 
android:centerColor= ”#FFOOOOFF" 
android:endColor= "#FFFFOOOO" 
android:gradientRadius = "200.0" 
android:centerX= "0.2" 
android:centerY= "0. 7 ' 

</ shape> 
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O Stroke (Línea de borde): 



Utilizar junto al 
atributo “dashWidth” 


<?xml versión ="1.0" encoding = "utf-8"?> 

<shape xmlns:android= "http://schemas.android.com/apk/res/android” 
android:shape= "rectangle" > 

<solid android:color ="#FF00FF00" /> 


<stroke 

| 


android:width= "5dp" 

■ 


android:color= "#FFFFOOOO" 

■ 


android:dashGap= "4dp" 

■ 


android:dashWidth= "8dp 

■ 

■ 


/> 

■ 

1 



</ shape> 


O Padding (Relleno): desplaza al contenido que pongamos sobre la Shape Drawable 


Atributo Definición Ejemplo Valor ■ Atributo Definición Ejemplo Valor 



<?xml versión ="1.0" encoding = "utf-8"?> 

<shape xmlns:android= "http://schemas.android.com/apk/res/android" 
android:shap e=” rectangle" > 

<solid android:color ="#FFFF0000" /> 

<padding 

android:left= "40dp" 
android:top= "50dp" 

/> 



</ shape> 


O Size (Tamaño): No se suele usar, ya que el tamaño lo determina la View donde se pone el Shape 
Drawable. Si quieres que se aplique este tamaño en una ImageView tendrás que poner su atributo 
Android:scaleType = “center” 


Atributo 

Definición 

Ejemplo 

Valor 

height 

Altura 




Desde Odp 


Atributo 

Definición 

Ejemplo 

Valor 

width 

Anchura 





Desde Odp 
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Ejemplo de imágenes 


Lo que haremos 

O Pondremos una imagen personalizada: para ello pondremos una imagen de nuestro logo en las carpetas 
drawables (por facilitar el ejemplo, hemos puesto todas las imágenes dentro de la carpeta “drawable- 
mdpi”, aunque estaría mejor hacer una imagen para cada densidad). Luego se la asignaremos en el 
diseño XMLal atributo “android:src” de una “ImageView”. 

O Texto con fondo personalizado definiéndolo desde XML en una forma: crearemos una “Shape” con un 
degradado de colores y un borde, que pondremos en el diseño XML de un “TextView” en el atributo 
“Android:background” de un “TextView”. Además le pondremos un color al texto desde XML. 

O Botón de estados personalizados: haremos una “State List”: con tres estados de pulsado, enfocado y en 
reposo. Las imágenes de cada uno de los estados serán de tipo 9-path. Estos estados estarán asignados 
directamente a un “Button”. Y a este botón, el texto le cambiaremos el color desde Java. 





Nota para cambiar el enfoque: para enfocar el botón con el emulador basta con pulsar la tecla “Tabular” del 
teclado hasta posicionarnos encima del botón. Para un dispositivo, necesitamos uno con teclas de cursor, ya no 
se suelen utilizar mucho, por lo que puede que el enfoque quede obsoleto. 

Nota sobre losStrings: Estaría mejor utilizar la carpeta “strings.xml” para guardar los textos que necesitemos 
(para simplificar el ejemplo no lo utilizo, pero debes usarlo para una mejor programación). Otra cosa más, utilizo 
“\n” en un “String” para indicar a Java que ahí quiero un salto de línea. 
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Proyecto 


d í¿3 Imagen 
d £§ src 

d ® com.jarroba.imagen 

|> $3 gen [Generated J 

(> á, Android 4.4W 
0 E& Android Prívate Librarles 
¡¿3- assets 


> 2 * 
> ¡c> 

- ^ 

> 


bin 

libs 

res 

fe drawable-hdpi 
fe drawable-ldpi 
£^drawabl^ndD¡ 


B. boton_enfocado.9.png 
boton_normal.9.png 
boton_pulsado.9.png 
[o, estados_del_boton.xml 
la) forma.xml 


logojarroba.png | 

(¿^irawaDl^cncip^^^^ 

fe drawable-xxhdpi 

p^^ctivit^^amücm^ 

fe 

o dimens.xml 
[o) strings.xml 
|cí] styles.xml 
fe values-vll 
fe values-v14 
fe values-w820dp 
AndroidManifest.xml 
i ¡cjauncher-web.png 
) proguard-project.txt 
) project.properties 
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res/layout/activity_main.xml 


CLinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns: tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:gravity= "center" 
android:orientation= "vertical" 

android:paddingBottom = "Qdimen/activity_vertical_margin" 
android:paddingLef t= "Qdimen/activity_horizontal_margin" 
android:paddingRight = ”ddimen/activity_horizontal_margin" 
android:paddingTop= "Qdimen/activity_vertical_margin" 
tools:context= "com.jarroba.imagen.MainActivity" > 

<ImageView 

android: id= "@+id/imageView_logo" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android: src= "@drawable/logo_j arroba" 

android:contentDescription = "Descripción de la imágen" /> 
<TextView 

android: id= "@+id/textView_a_colorear" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:layout_margin= "30dp" 
android:background= "@drawable/forma" 

android: text= "Un texto cualquiera\nwww.Jarroba.com" 

android:textAppearance = "?android:attr/textAppearanceMedium" /> 

<Button 

android: id= "@+id/button_miboton" 

android:layout_width= "wrap_content" 

android:layout_height= "wrap_content" 

android:background = "@drawable/estados_del_boton" 

android: text= "Púlsame" 

android:textColor= "Qcolor/Morado" /> 

</ LinearLayout> 
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Valúes (Valores) 


Strings (Textos) 

¿Qué es un String inmutable? 

Una cadena de texto se guarda en un objeto de tipo String. Que 
representa un array de char[] de valores codificados en UTF-16 (Unicode). 
Un String es un objeto inmutable (una vez creado su estado no puede ser 
cambiado) 


¿Está bien poner los Strings directamente escritos (Hardcoded) en Java o 
en losXML? 

En Android es recomendable tratarlos como recursos. En la carpeta 
“valúes”. 


¿Se puede tener el mismo texto traducido a diferentes idiomas? 

Sí, se puede tener el mismo texto pero en diferentes idiomas. Como 
vimos, para ello tendremos que crear una carpeta “valúes” con un sufijo 
de idioma; por ejemplo: “values-fr” 


¿Sólo se pueden tratar textos simples? 

Existen tres tipos de recursos para tratar las cadenas de texto: String, String Array y Quantity Strings 


r-ei 

£T 

> 

> 

> 

> 


src 

gen [Generated Java Files] 
^ Android 4.3 

Android Prívate Libraries 
Qzi' assets 

> ^ bin 

> üi übs 
j ¡fjj res 

t> (2j drawable-hdpi 
(2?- drawable-ldpi 
t> Cqfc drawable-mdpi 

> (2j drawable-xhdpi 

t> drawable-xxhdpi 

> layout 

* valúes 

^Qjdimens^xml 


A Prt ' 

X 

A 

* 


Cjj styles.xml 
yajue^r^^^ 

strinqs.xml 


-l¿íl n 5 


values-es 


i 


^^trinc|samj| 

^lues-f^^^^ 

^^trin^samj 


Referencias: 

O http://developer.android.com/reference/iava/lang/String.html 
O http://developer.android.com/guide/topics/resources/string-resource.html 
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String (String simple) 

¿Qué es? 

Una simple cadena de texto 



¿Para qué se usa? 

Para cualquier texto que no vaya a ser modificado durante la ejecución de la aplicación 


¿Cómo se obtiene? 

O En los recursos XML con: @str¡ng/nombre_string 

CTextView 

android: id= ,, @+id/textView$activity_main$EscribirParaGuardar” 

android:layout_width= "wrap_content " 
android:layout_height= ”wrap_content " 
android: layout_alignParentTop= 11 1rué " 
android: layout_centerHorizontal= 11 1rué " 
android:layout_marginTop= ”130dp ” 
android: text = " @string/escriba_para_guardar_ ” 

android:textAppearance = "? android:attr/textAppearanceLarge” /> 

O En Java con: getString(R.string.nombre_string) 

String textoDelBoton = getString(R.string. boton_guardar) ; 


¿Existe alguna forma de extraer los Strings de los recursos XML, de manera fácil y automática? 

Sí, es muy sencillo. Desde un recurso XML seleccionamos solo el texto que queramos extraer. Entonces 
pulsamos en la barra de herramientas en “Refactor/Android/Extract Android String...”. 


1 Refactorl Source Navigate Search Project Run Window Help 


Android * 

Change Widget Type... 



Change Layout... 


ge Explorer £2 

Remove Container... 

mi 


Wrap In Container... 

roid : paddingT op= "Sdimen/activity vertica. 


Extract Style... 

ls:context= "com.jarroba.dibujarui.MainAc 


Extract as Inelude... 

xtView 


Extract Android String... Alt+Shift+A, S | 

android: id=”@+id/ textViev$activity main 


■ 

android:layout_width- 'Vrap_content " 


14 

android:layout height= "vrap content" 


15 

android:layout alignParentTop="true" 


16 

android:layout_centerHorizontal= "true " 


17 



Al 8 

| ar.droid: text='j HM" 1 


jjl9 

anaroia : textAppearance= " sanaroia:a ccr/t ■ 


Se nos abrirá una nueva ventana para que configuremos la nueva propiedad del recurso que vayamos a extraer. 
Aquí se nos rellenarán los campos automáticamente del “String “que extraeremos y por cuál identificador será 
remplazado en “replace by R.string.”. Estos anteriores podremos modificarlos aquí, o posteriormente en el 
fichero “strings-xml”. Recordar, que en este misma ventana podremos indicar en qué carpeta de idioma lo 
guardaremos (en el cuadro “Configuraron:” pasamos a la derecha “Language” donde elegiremos el idioma; si 
escogemos fr se nos guardará un fichero “strings.xml” con este valor en la carpeta “values-fr”. Si no ponemos 
nada se guardará en la carpeta por defecto “valúes”). 
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Después de esto podremos comprobar como efectivamente se nos ha cambiado el contenido del texto a 
identificador de tipo String: 


I |o¡ activity_main.xml £2 | 

android:paddingTop= "@dimen/activity_vertical_margin' 
tools:context= "com.jarroba.dibujarui. MainActivity$Pl 

10 

11 -CTextView 

12 android: id.= "@+id/textViev$activity_main$Escribii 

13 android: layout_width='Vrap_content" 

14 android: layout^height 5 ® "vrap_con ten t" 

15 android:layout_alignParentTop="true" 

16 android:layout_centerHorizontal="true" 

18 I android: zexz="@string/escriba_para_guardar_" I 

Y en el fichero “strings.xml” correctamente se habrá creado: 

! [o] strings.xml 23 I 

1 <?xml version=”l . 0" encoding="ut f-8"7> 

2 <resources> 

3 

4 

5 

6 

7 

8 </resources> 


<string name= ,, app_naine">Strings</string> 


¿Y para extraerlos desde Java? 

Parecido al anterior. Seleccionamos el texto y repetimos los pasos. 


Refactor I Source 


Rename... 

Move... 


Navigate Search Project Run Window Help 
Alt+Shift+R r- T 
Alt+Shift+V - 


vi * <J - 


Android► 

Change Method Signature... Alt+Shift+C 

Extra ct M eth o d... Alt+ Sh ¡ft+ M 

Extract Local Variable... Alt+Shift+L 

Extra ct Constant... 

Inline... Alt+Shift+I 

Convert Local Variableto Field... 

Convert Anonymous Class to Nested... 

Move Type to New File... 


r--? I 

Change Widget Type... 

Change Layout... 

Remove Container... 

Wrap ln Container... 

I í 

Extract Sty le... 

Extract as. Inelude... 

^E^actArid^¡d^in^^^AJt+^hTt^A^J r:3tance " 

setContentView (R. layout. activi ty_main} ; 



Button botonGnaidai = 


Extract SupereIass. 


|botonGuarda^^3etTex^ 




Otón Guard 
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¿Cómo se asigna un String desde el editor gráfico de diseños XML? 

Si seleccionamos la View que queremos ponerle el texto, podremos poner un String directamente sobre el 
atributo “Text”. Si pulsamos los tres puntos, se nos abrirá un asistente para auto-crear un identificador de String 
para el fichero “strings.xml”. 



String Array 

¿Qué es? 

Una array de cadenas de texto 



¿Para qué se usa? 

Para listados, como Spinners 


¿Cómo se obtiene? 

O En Java con: getResources().getStringArray(R.array.array_strings) 

String[] arrayStringPajaros = getResources().getStringArray(R.array. stringarray_pajaros); 
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¿Existe una manera sencilla de añadir un Array de Strings sin tener que estar escribiendo XML? 


[cí¡ strings.xml 23 

>*■ Android Resources (default) 

Resources Elements 0000(S]0(S](T)(P]A:: 


Sí, existe un asistente en el fichero “strings.xml”. Pulsamos abajo en la 
pestaña de “Resources”. Aquí podremos pulsar el botón “Add...” 


10 app name (Stringj i 

0 escriba_para_guardar_ (String) 
0 escriba_algo (String) 

0 boton_guardar (String) 

(S) stringarray_pajaros (String Array) 
0 Item 
0 Item 
0 Item 
0 Item 
0 Item 
0 Item 
0 Item 
0 Item 


I Add... I 


^^^^o^^^ffi~strings.xmi~ 


Up 

Down 


Nos abrirá una nueva ventana en el 
que podremos elegir añadir 
“String_Array”. También permite 
añadir “String” simple (lo explicamos 
en “String Array” porque un String 
simple suele ser más cómodo 
extraerlo, aunque también vale 
hacerlo con este asistente o 
directamente sobre XML), y también 
nos permitirá añadir los “Quantity 
Strings” que se explicarán a 
continuación. 


Create a new element atthetop level, in Resources. 


0Color 
(0) Dimensión 
©Drawable 
(T)lnteger Array 
0ltem 

fPl Quantity Strings (Plurals) 
0 String 


[S |String Array 


[SJStyle/Theme 


I ° K I 


Se nos habrá creado nuestro nuevo “String Array”. Seleccionándolo le podemos poner un nombre en “Ñame” y 
luego añadir elementos pulsando otra vez “Add...” 


strings.xml 23 1 

= E 

■Si Android Resources (default) 



Resources Elements 00®®GE)0(IDCD(E]Ai Attributes for miStringArray (String Array) 


0 app name (String) 

0 escriba_para_guardar_ (String) 
0 escriba_algo (String) 

0 boton_guardar (String) 
^^tringama^jaiaro^Strin^Array) 


^Tdd^n 


An array of strings. Strings are added as underlying item 
¡Ñame miStringArray 


Up 


Down 


( 0 ) 


O Create a new element at the top level, in Resources. 

(•) Create a new element in the selected element, miStringArray (String Array). 




^3 


De igual manera que antes, añadimos los elementos con “Item. 
Y le ponemos un valor en “valué” a cada uno. 


@1 strings xml 23 


= □ 

■ffi Android Resources (default) 

Resources Elements 00®®(D0(S]|T)(F|Ar 

Attributes for Item 

A ctrinn valnptn iicp in thic ctrinn array. 



0 escriba_para_guardar_ (String) 
0 escriba_algo (String) 

0 boton_guardar (String) 
fS~] stringarray_pajaros (String Array) 
ray (String Array) 


I Valué* un valor 


Up 
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Quantity Strings 

¿Qué es? 

Para poner las palabras en singular o plural, según el número 



¿Para qué se usa? 

Para los plurales. Por ejemplo: cero libros, un libro, dos libros, tres libros, etc 


¿Cómo se obtiene? 

O En Java con: getResources().getQuantityString(R.plurals.plurals_misPlurarels, contador_plural, 
contador_%d); 

for (int i = 0; i < 4; i++) { 

String stringCantidad = getResources().getQuantityString(R.plurals .plurals_numero_de_pajaros, i); 

} 


¿Qué tipos de cantidades existen? 

O zero (0) 

O one(1) 

O two (2) 

O few (pocos) 

O many (muchos) 

O other (otros) 


¿Cuáles se usan en español? 

En español nos sirve con utilizar “one” para 1 y “other” para el resto (en español tanto cero como más de 1 se 
escriben en plural). El resto de tipos de cantidades son para otros idiomas. 
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Varios idiomas 


¿Qué es? 

La capacidad que tienen todas las aplicaciones Android de poder tener texto en 
más de un idioma. 


¿Para qué se usa? 

Para que personas de diferentes idiomas puedan entender, por tanto usar tu 
aplicación, por lo que serán potenciales clientes. 


¿Cómo se obtiene? 

Android permuta automáticamente entre los diferentes idiomas según esté 
configurado el idioma del dispositivo. 


¿Cómo se añaden? 

Hay que crear carpetas “valúes” con sufijo. Por ejemplo “values-fr” para el 
idioma Francés. Lo que tendrá que contener esta carpeta será una copia exacta 
de la estructura XML del fichero “strings.xml” que existe en la carpeta “valúes”, 
con la particularidad de estar traducidos los textos a este otro dicho idioma. 


* Strings 
t> 03 src 

> fe gen [Generated Java Files] 

> tíi Android 4,4,2 

|> tó, Android Prívate Librarles 
fe assets 
t> fe bin 

> fe libs 
a fe res 

t- & drawable-hdpi 
£5? drawable-ldpi 
[> & drawable-mdpi 
[> £3 drawable-xhdpi 
[> drawable-xxhdpi 
t- & layout 
a (23- valúes 

r^limen^xml 

|a styles.xml 
s l 2 f^/alue^e^^^^ 

t- & values-vll 
[> & values-v14 
[> & values-wSZOdp 
[í] .classpath 
0 .project 

¡cf AndroidManifest.xml 
icjauncher-web.png 
1 _J prGguard-project.txt 
J] prüject.properties 


¿Cómo puedo probar los idiomas en el emulador o en un dispositivo físico? 



W1DGETS 


People 


Messaging 


Widget 

Previev* 


Strings 


Settings Speech 
Recordé» 


<H Language 

English (United Kingdom) 


English (United States) 


Español (España) 


Español (Estados Unidos) 


Filipino 


Frangais 


Pranra»* 


Settings 


Location access 


A Security 


Q language & input 


O Backup & reset 


accounts 


4 - Addaccount 
SYSTEM 

0 oate & time 
^ Accessibility 


language & input 


language 

English (United States) 


y Spell checker 


Personal dictionary 


KEYBOARD 8. INPUT METHODS 


lish tOS) • Android Keyboard (AOSP) 

Android Keyboard(AOS 5 

English (US) 


japanese 


■ al apartado de “Settings” (Ajustes) de Android. 


Entrar en “Language & input en inglés” (Idioma 
e introducción). 


Seleccionar 

“Language” 

(Idioma). 


Ahí elegiremos el idioma que queramos utilizar para probar (ojo, que al cambiar 
el idioma, si no lo entendemos, nos tendremos que acordar de los pasos para 
volver a cambiarlo). 
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Ejemplo de Strings con idiomas 


Lo que haremos 

O Primero pondremos un TextView al que le pondremos el String desde el XML, asociado a un String del 
fichero “strings.xmr. 

O Luego pondremos un botón al que se le pondremos el String desde Java, siempre tomando el String 
desde el fichero “strings.xml”. 

O A continuación crearemos un String Array en el fichero “strings.xmr, que recorreremos y mostraremos 
en un TextView 

O Del mismo modo, mostraremos en un TextView un String de cantidad en le que contaremos desde cero a 
tres 



Muestro un texto 
directamente desde XML 


Botón Guardar 


Buho, 

Colibrí, 

Cuervo, 

Flamenco. 

Kiwi, 

Loro, 

Pavo, 

Pingüino, 


sssxgr 

’t!Sccioiado 1 pál aros 

i seleccionado 3 p4i aros 


O Y para rematar, traduciremos el fichero de “strings.xml” al inglés y al francés. Y estableceremos el 
fichero en inglés como el idioma por defecto (lo guardaremos en la carpeta “valúes”). 




Je montre le texte 
directement á partir de XML 

Bouton Enregistrer 


Htbou, 

Colibri, 

Corneille, 

Flamenco, 

Kiwi, 

Parrot, 

Turqute. 

manchol 


seul oiseau 

;^ é °^°nn£ 

,nt«ésélecrio nnés 


0: A été choisi \ 

v Aétéchoisi 
2.2 oiseaux o 
3 3 oiseaux o 
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Proyecto 


d Strings 
d src 

á com.jarroba.strings 

■ | [J] MainActivity.java | 

gerHueneratecnav^iíes] 
t> Android 4,4,2 
t> Andró id Prívate Libraries 
& assets 

> ^ bin 

> 11 bs 
J ^ res 

> & drawable-hdpi 
(S? drawable-ldpi 

> & drawable-mdpi 

> & drawable-xhdpi 

> & drawable-xxhdpi 



D & va lúes- vil 

> (S? va lúes- vi 4 

> values-wSZOdp 
0 .classpath 

[í| .project 

a AndroidManifest.xml 
l^j icjauncher-web.png 
Ü] proguard-project.txt 
Ü] project.propert¡es 
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res/layout/activity_main.xml 


<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/andró id" 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 

android:paddingBottom= "@d±men/activity_vertical_marg±n" 
android:paddingLef t= "Qdimen/activity_horizontal_margin" 
android:paddingRight= "@dimen/activity_horizontal_margin" 
android:paddingTop= "Qdimen/activity_vertical_margin" 

tools:context= "com.jarroba.dibujarui.MainActivity$PlaceholderFragment" > 
<TextView 

android:id= "@+id/textView$activity_main$EscribirParaGuardar" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:layout_alignParentTop= "true" 

android:text= "@string/muestro_un_texto_directamente_desde_xml" 
android:textAppearance= "?android:attr/textAppearanceLarge" /> 

<Button 

android:id= "@+id/button$activity_main$PulsarParaGuardar" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 

android:layout_below= "@+id/textView$activity_main$EscribirParaGuardar" 
android:layout_centerHorizontal= "true" /> 

<TextView 

android:id= "@+id/textView$activity_main$MostarStrings" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 

android:layout_below= "@+id/button$activity_main$PulsarParaGuardar" 
android:layout_centerHorizontal= "true" /> 

</RelativeLayout> 


res/va I ues/stri ngs.xm I 


<?xml versión ="1.0" encodinq="utf-8"?> 

<resources> 

<string name= "app_name ">Strings</ string> 

<string name= "muéstro_un_texto_directamente_desde_xml ">I show text directly from 
XML</string> 

<string name= "boton_guardar ">Save Button</string> 

<string-array name = " stringarray_pajaros”> 

<item>Owl</ item> 

<item>Hummingbird</ item> 

<item>Crow</ item> 

<item>Flamingo</ item> 

<item>Kiwi</ item> 

<item>Parrot</ item> 

<item>Turkey</ item> 

<item>Penguin</ item> 

</ string-array> 

<plurals name= "plurals_numero_de_pajaros"> 

<item quantity= "one ">Was selected only bird</item> 

<item quantity= "other ">Were selected %d birds</item> 

</plurals> 

</ resources> 
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Colors (Colores) 

¿Qué es? 

Es un fichero XML que llamaremos “colors.xml”. Guardará los colores que 
definiremos en alguno de los formatos de color soportados para que los 
podamos utilizar sin tener que recordar la combinación hexadecimal, y para 
hacer independizar los colores del código. 


¿Qué formatos de color soporta? 

Los formatos de colores soportados son (Siendo: A alfa, R rojo, V verde y B azul): 

O #RGB 
O #ARGB 
O #RRGGBB 
O #AARRGGBB 


Como recomendación y por estandarizar en el que más juego nos ofrece, es 
preferible utilizar siempre #AARRGGBB. Por ejemplo, para el color azul sin que 
transparente escribiremos: #FFOOOOFF 


a AppManifest 

> 03 üre 

i» & gen [Generated Java Files] 
t> aít Android 4 3 

Android Prívate Librarles 
fe a s sets 
|> fe bin 
[> fe 11 bs 
J S* res 

|> & drawable-hdpi 
drawable-ldpi 
[> & drawable-mdpi 
[> drawable-xhdpi 

t> (S? drawable-xxhdpi 

> layout 

a 1S? value^^^^^ 

(g dimens.xml 
(G strings.xml 
[g] styles.xml 
[> & values-sw&DOdp 

> (¿3 values-sw720dp-land 
[> (^values-vll 

> £üz values-v14 

¡Cl AndroidManifest.xml 
i^l icjauncher-web.png 
@] proguard-project.tít 
Ql project.properties 


¿Cómo se crea un fichero “colors.xmr? 

Sencillo, tan solo hay que escribir dentro de las etiquetas <resources> los colores que queramos con <color>. 
Tendrá un atributo “ñame” donde pondremos el nombre del color, y en el valor de la etiqueta pondremos el 
código hexadecimal antes explicado. 

<?xml version= "1.0" encoding ="utf-8"l> 

<resources> 

<color name= "Rojo ">#FFFF0000</ color > 

<color name= "Verde ">#FF00FF00</color> 

<color name= "Azul ">#FF0000FF</ color> 

<color name= "Amarillo ">#FFFFFF00</ color> 

<color name= "Morado_ligeramente_transparente ">#AAC54B8C</ color> 

<color name= "Dorado ">#FFFFD700</color> 

<color name= "Rosa ">#FFFF00FF</color> 

</ resources> 

¿Cómo se obtiene? 

Se puede usar en cualquier atributo de cualquier View que permita un color, como cambiar el color de un texto. 
O En los recursos XML con: @color/color_elegido 

CTextView 

android:id= "@+id/textViewl" 
android:layout_width= "wrap_content" 
android:layout_height= ”wrap_content” 
android:text= "TextView" 

android:textColor= "@ color/mi_color_azul" /> 

O En Java con: getResources().getColor(R.color.color_elegido) 

int colorElegido = getResources().getColor(R.color,mi_color_azul) ; 

TextView tv = (TextView) findViewByld(R.id. TextVlew_unTexto ) ; 
tv .setTextColor (colorElegido) ; 
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¿Puedo agrupar colores? 


Sí, puedes utilizar un “integer-array” para agrupar colores. Este “integer-array” también puedes utilizarlo para 
agrupar otros números enteros que sean finales. 

<?xml versión ="1.0" encoding = "utf-8"?> 

<resources> 

Ccolor name= "Rojo ">#FFFF0 00 0</ color > 

<color name= "Verde "># FFO0FF00</ color > 

Ccolor name= "Amarillo "># FFFFFFOCK/ color > 

Ccolor name= "Azul ">#FF0000FF</ color> 

<integer-array name= "ColoresSemaforo"> 

<item>@ color/Rojo</item> 

<item>@ color/Amarillo</item> 

<item>@ color/Verde</item> 

</integer-array> 


</ resources> 

Para llamarlos desde Java es tan sencillo como obtener el array y utilizarlo de manera normal: 

int[] ColoresSemaforo = getResources().getlntArray(R.array. ColoresSemaforo ) ; 

int colorElegido = ColoresSemaforo [2]; //Muestra el color verde 


¿Hay algún color que pueda usar, para no tener que crearlos cada vez? 

Se pueden utilizar los colores que trae la biblioteca de Android, así nos ahorramos líneas de código. 
O En los recursos XML con: @android:color/color_elegido 

CTextView 

android:id= "@+id/textViewl” 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:text= "TextView" 

android:textColor= "Qandrold:color/holojpurple” /> 

O En Java con: getResources().getColor(android.R.color.color_eleg¡do) 


int colorElegido = getResources().getColor(android.R.color.holo_purple); 


¿Se puede asignar desde el editor gráfico de diseños? 

Sí, desde el panel de “Properties” del editor gráfico podremos elegir un atributo que admita colores, buscarlo y 
seleccionarlo. 


Ejemplo de color definido por nosotros en 

“colors.xml”: 


/ #w - 

Eisi ii' ' ssipg n 


Texto 

color 


con 


a [K] RelativeLayout 

¡§b| textV¡ew_colorear - "Texto con color" 


□ Properties 

» 1 i a z 1 m I 

1 Text 

Texto con color 



Text Color Hint 

■ <8>andro¡d:color/h¡nt_fore. 

Text Appeara... 
fext Size 

?android:attr/textAppearanc. 

50sp 

Typeface 



Ejemplo de color utilizando los que vienen con la 

biblioteca de Android: 


^ Properties ^¡> 

Id @ + i d/textVi ew_c o lo rea r 

+ Layout Parame.. [] 

Text Texto con color 

^^x^ppearanc^androícTatt^extwppea^nceMei 

TextSize 50sp 

Content DescrL. 



Referencias: 

O http://developer.android.com/guide/topics/resources/more-resources.html 
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Ejemplo de uso de colores 


Lo que haremos 

O Un texto coloreado con uno de nuestros colores desde el diseño XML. 

O Un texto coloreado con un color del API de Android desde el diseño XML. 

O Un texto coloreado con uno de nuestros colores desde el diseño Java. 

O Un texto de un botón coloreado con un color del API de Android desde el diseño Java. 

O Un texto que tenga cada letra coloreada con tres colores diferentes, utilizando un “integer-array”. Este 
texto lo colorearemos gracias a la clase “Spannable” -tenemos que pensar en esta clase como si de un 
“String” se tratara- la gracia de este String de tipo Spannable es que le podemos aplicar formatos un 
formato diferente a cada letra del String (Spannable signifique en español “abarcable”, pues con el 
método setSpan() iremos abarcando grupos de caracteres para darles estilo; en este ejemplo iremos 
abarcando de carácter en carácter). Una pista es hacer un “for” que recorra cada letra y le aplique un 
color diferente a cada una. En este ejemplo utilizaremos el módulo “%" de Java para facilitarnos el 
recorrer el array; como recordatorio de este operador “%” es lo que da el resto de la división (ejemplo: 
0%3=0, 1%3=1, 2%3=2, 3%3=0, 4%3=1, 5%3=2, 6%3=0...). 

O Un fondo coloreado con uno de nuestros colores desde el diseño XML. Utilizaremos el “LinearLayout” 
como fondo en este ejemplo, aunque luego veremos cómo se hace con estilos. 

Nota: por facilitar la comprensión del código he puesto los Strings a pelo en el código, recuerda utilizar siempre 
los ficheros de “strings.xml” 



Coloreado desde XML con nuestro] 
color 

Coloreado desde XML con un color 
de la API de Android 

| Texto coloreado desde Java ci 
I nuestro color 

I 

I coloreado desde Java^ 

I “"“’Crow” 

I T t Q " á * ' 

I T x ol e da 


Colores 
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Proyecto 


a 0 Colores 
a (3 &rc 

a ffl com.jarroba.colores 
0 |^^4amAct!vÍtyjav^ 

> §3 gerr^ener^te^av^MeT 

> Android 4,4W 

> Android Prívate Librarles 
¡¿3? as sets 

> §5? bin 

> ¡¿3? libs 
* üf> res 

t> £3 drawable-hdpi 
l23- drawable-ldpi 
t> £3 drawable-mdpi 
> £3 drawable-xhdpi 
t> £3 drawable-»íhdpi 
j layout 



* i_- valúes 

a strings.xml 
a styles.xrml 
t> values-vll 
|> £> va lúes- vi 4 
[d AndroidManifest.xml 
^ icjauncher-web.png 
Q| proguard-project.bít 
J] project.properties 


MainActivity.java 


public class MainActivity extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; 
setContentView(R.layout. activity_main ); 

// Coloreamos el texto con un color de los nuestros 

int colorMio = getResources().getColor(R.color .Morado_ligeramente_transparente) ; 

TextView tv = (TextView) findViewByld(R.id. textView$activity_ma±n$texto) ; 
tv.setTextColor (colorMio) ; 

// Coloreamos el texto con un color de la API de Android 

int colorDeLaApiDeAndroid = getResources().getColor(android.R.color. holo_blue_dark) ; 

Button btn = (Button) findViewByld(R.id. button$activity_main$boton) ; 
btn .setTextColor (colorDeLaApiDeAndroid) ; 

// Colorearemos cada letra de un texto con el array 

int[] coloresSemaforo = getResources().getlntArray(R.array. ColoresSemaforo) ; 

Spannable textoColoreado = new SpannableString( "Texto que tendrá cada letra coloreada") 
for (int i = 0; i < textoColoreado .length(); i++) { 

Log.v( "test", i + " % 3 = " + (i % 3)); 
int colorElegido = coloresSemaforo [ i % 3]; 

textoColoreado .setSpan (new ForegroundColorSpan (colorElegido) , i, i + 1, 
Spannable. SPAN_INCLUSIVE_INCLUSIVE) ; 

} 

TextView tvColores = (TextView) 

findViewByld(R.id. textView$act±v±ty_main$textoLetrasColoreadas) ; 

tvColores .setText (textoColoreado) ; 

} 


} 
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res/layout/activity_main.xml 


CLinearLayout xmlns:android= "http :// schemas . android.com/apk/res / andró id" 
xmlns: tools= "http://schemas.android . com/tools " 
android:layout_width= "match_parent " 
android:layout_height= "match_parent " 
android:background= "@color/DoradoClaro " 
android:gravity= "center" 
android:orientation= "vertical " 

tools:context= "com. j arroba.colores.MainActivi ty" > 

<TextView 

android:layout_width= "wrap_content " 
android:layout_height= "wrap_content " 
android:gravity= "center" 

android:text ="Coloreado desde XML con nuestro color" 
android:textColor= "@color/Roj o" 
android:textSiz e="20sp" /> 

<TextView 

android:layout_width= "wrap_content " 
android:layout_height= "wrap_content " 
android:gravity= "center" 

android:text =" Coloreado desde XML con un color de la API de Android" 
android:textColor= " Qandroid:color/holo_green_dark " 
android:textSiz e="20sp" /> 

CTextView 

android: id = " @+id / textView$activity_main$texto" 
android:layout_width= "wrap_content " 
android:layout_height= "wrap_content " 
android:gravity= "center" 

android: text= "Texto coloreado desde Java con nuestro color" 
android:textSiz e="20sp" /> 

<Button 

android: id— "@+id/button$activity_main$boton" 
android:layout_width= "200dp" 
android:layout_height= "1OOdp" 

android: text= "Texto de botón coloreado desde Java con un color de la API de Android" 
android:textSiz e="15sp" /> 

CTextView 

android: id= ”@+id/textView$activity_main$textoLetrasColoreadas" 
android:layout_width= "wrap_content " 
android:layout_height= "wrap_content " 
android:gravity= "center" 

android: text= "Texto coloreado desde Java con nuestro color" 
android:textSiz e="20sp" /> 

</ LinearLayout> 


res/val ues/colors.xm I 


<?xml versión ="1.0" encoding= "utf-8 "?> 

<resources> 

Ccolor name= "Rojo ff >#FFFF0 00 0</ color > 

Ccolor name= "Verde "># FFO0FF00</ color > 

Ccolor name= "Azul ' f >#FF0000FFC/color> 

Ccolor name= "Amarillo ">#FFFFFF00c/ color> 

Ccolor name= "Morado_ligeramente_transparente rf >#AAC54B8CC/ color> 
Ccolor name= "DoradoClaro ff >#FFF6D57 4c/color> 

cinteger-array name= "ColoresSemaforo”> 
citem>@ color/Roj oc/ item> 

Citem>@color/AmarilloC/ item> 
citem>@color/VerdeC/ item> 

</ integer-array> 

</ resources> 
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Styles (Estilos) 

¿Qué es? 

Un estilo es una colección de propiedades que especifican aspecto y el formato de 
una View, Activity, Fragment o a toda la aplicación. Dicho de otro modo, sirve para no 
tener que repetir los mismos atributos en todas las Views. Un ejemplo sería si 
quisiéramos que todos los TextView de nuestra aplicación el texto fuera de color 
verde, con un tamaño de letra de 20sp y en negrita; podríamos ir TextView en 
TextView copiando y pegando los mismos atributos. 


¿Cuáles hay? 

Hay bastantes. Algunos son: color, font (fuente), padding (relleno), size (tamaño), 
height (altura), etc. 


¿Se declara en otro fichero aparte del de diseño? 

Sí, se definirá en la carpeta “res” dentro de alguna de las carpetas “valúes” (dentro de la carpeta “valúes” 
dependiendo de características deba tener el dispositivo a aplicar el estilo; para empezar, recomiendo trabajar 
solo con la carpeta llamada tal cual “valúes”, la que no tiene extensión alguna). El fichero de estilos se puede 
llamar como queramos y con la extensión ".xml”; al crear un proyecto ya existe uno llamado “styles.xml” que 
podemos utilizar. 


a \ ¿3 DibujarUIEstilos 
t> & src 

> $3 gen [Generated Java Files] 

» fiít Android 4.4.2 

> bX Android Prívate Libraries 
^ assets 

> bin 

> libs 
a ^ res 

> & drawable-hdpi 
& drawable-ldpi 

> & drawable-mdpi 

> £3- drawable-xhdpi 

> £3 drawable-xxhdpi 

> & layout 

> £3 menú 
a & valúes 

[o, dimens.xml 
idstrinqsjoTnl 

^^t^lesocmj 
d £3> value^^ 

a £ > values-v14 

^"^tyíeslxmí| 

> £ 3 value^wSZOdp 
@) AndroidManifest.xml 
iBi, ¡cjauncher-web.png 
Hl proguard-project.txt 
[§] project.properties 


¿Es útil separar los estilos de los layout? 

Mucho. Una ventaja es que podremos tener varios estilos para cada tipo de dispositivo (por la versión del 
sistema operativo, por el tamaño de la pantalla, si es Tablet o Smartphone, etc). Otra es la independencia que 
conseguimos y la facilidad que nos aportará para realizar cambios en un futuro al disponer del contenido en la 
carpeta “layout” y los estilos en las carpetas “valúes”. 


Supongamos que queremos poner dos TextViews de color rojo, con un tamaño de 20sp, con lOdp de margen, 
ajustados al contenido tanto por alto como pon ancho. 


DibujarUIEstilos 



Si aplicáramos los 
estilos 

directamente 
sobre las Views 
tendríamos un 
diseño en la 
carpeta “layout” 
como el que se 
muestra a la 
derecha. 


CTextView 

android:layout_width= "wrap_content" 

android:layout_height= ”wrap_content" 

android:layout_margin= "1Odp" 

android: text= "TextView A - www.Jarroba.com' 1 

android:textColor= "#FFFF0000" 

android:textSize= "20sp" 

/> 


CTextView 

android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:layout_margin= "1Odp" 

android:text = "TextoView B - Tutoriales Informáticos" 
android:textColor= "#FFFF0000" 
android:textSize= "20sp" /> 

Podemos ver que es mucho código, y si algún día tuviéramos que cambiar todos los 
textos, a por ejemplo, a color azul, habría que ir de uno en uno. 


Por otro lado, si aplicáramos estilos 
tendríamos el diseño de la carpeta layout que está al lado de 
este párrafo. Mucho más pequeño el XML y al cambiar algo 
del fichero estilos cambiará en todos a la vez. 

Ver siguiente pregunta el ejemplo del estilo que se aplica. 
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CTextView 

style= "Ostyle/MiEstiloDeLosTextViews h 
android:text= "@string/jarroba" /> 

CTextView 

style= "Ostyle/MiEstiloDeLosTextViews' 
android:text= "@string/jarroba_b" /> 
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¿Cómo se escribe un fichero de estilos en XML? 


Definiremos el fichero de estilos en formato XML en la carpeta “valúes” apropiada para que se apliquen 
dependiendo de si nos interesa a todo o solo en Tablets, Smartphones, dependiendo de la versión del sistema 
operativo, entre otras. 

Cada fichero de estilos se formará con estas etiquetas: 

O <resources>: Los estilos son recursos, por lo que se escriben entre las etiquetas <resources>. Podrá 
tener varios <style> 

O <style>: Cada estilo estará contenido en una etiqueta <style>. Este tendrá un ñame (nombre) que 
queramos, que será el referido por la View con “@style/nombre_estilo”. Y opcionalmente -aunque muy 
recomendado- un parent (padre) para poder reutilizar los estilos de éste y luego modificar los que 
queramos. Podrá tener varios <ítem> 

O <¡tem>: Cada modificación del estilo estará entre las etiquetas <item>. Tendrán un ñame (nombre) que 
ha de coincidir con la propiedad que queramos modificar, siempre comenzando con “android:". Entre la 
etiqueta de apertura y cierre pondremos el valor de la propiedad que utilizar la View que utilice estos 
estilos. 

<?xml versión ="1.0" encodinq="utf-8"?> 

<resources xmlns:android= "http://schemas.android.com/apk/res/andro±d"> 

<style name= "MiEstiloDeLosTextViews" parent= "Sandroid:style/TextAppearance.Médium"> 
<item name= "android:layout_width ">wrap_content</ item> 

<item name= "android:layout_height ">wrap_content</ item> 

<item name= "android: layout_margin ,, >10dp</item> 

<item name= "android:textColor ">#FFFF0000</item> 

<item name= "android: textSize ,r >20sp</ item> 

</style> 

</ resources> 


Completando al ejemplo 
anterior, para dar estilos a 
las Views que solicitan 
estilos externos. Este es el 
código de los estilos que 
utiliza, que está en la 
carpeta “valúes”. 


¿Son parecidos los estilos en Android a las CSS en diseño web? 

La filosofía de separar el diseño del contenido es la misma. Además que se aplican los estilos en cascada; es 
decir, se aplica el último más próximo al elemento (un ejemplo sería que definimos una hoja de estilos para que 
todos los textos sean de color rojo, y hay justo un texto que en exclusiva queremos que sea azul, si definimos el 
azul en este texto, se aplicará el azul y no el rojo que está en la hoja de estilos). 


¿Es lo mismo un estilo que un tema? 

Un tema es un estilo. Tema tiene un significado adicional, que indica que será aplicado a toda la Activity o a una 
aplicación en el AndroidManifest.xml, en vez de ir aplicando un estilo de View en View. 


¿Puedo aplicar el mismo estilo a toda la aplicación o a toda una Activity? 

Claro que sí. Habrá que añadirlo al AndroidManifest.xml a la etiqueta <application> para que se aplique a toda 
la aplicación, o a la etiqueta <Activity> para que afecte solo a una Activity en concreto. 

Por ejemplo, la aplicación ya está 
utilizando por el tema llamado 
“AppTheme” que está definido en el 
fichero “styles.xml” dentro de la 
carpeta “valúes”. Podremos 
modificarlo desde el fichero 
“styles.xml” y aprovechar que ya está 
heredando del tema de la aplicación. 


<?xml versión ="1.0" encodinq="utf-8"?> 

<manifest xmlns:android= "http://schemas.android.com/apk/res/android" 
package= "com.jarroba.dibujaruiestilos" 
android:versionCode= "1" 
android:versionName= "1.0" > 

<application 

android:icon= "@drawable/ic_launcher" 
android:label= "@string/app_name" 

android:theme= "@style/AppTheme” > 

</ application> 

</manifest> 
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¿Hay que definir todos los atributos aunque algunos los quiera mantener a los de por defecto? 

Como se explicó anteriormente no es necesario. Opcionalmente se puede añadir un estilo al “parent” para poder 
reutilizar los estilos de éste y luego modificar los que queramos. 


¿Puedo heredar mis propios estilos? 

Puedes heredar tus propios estilos para no tener que repetir la declaración de atributo. 

Si por ejemplo, un estilo que ponía los textos en rojo se llamaba “textoEnRojo” y quieres que otro estilo sea en 
rojo y en negrita. Con llamar al nuevo estilo con el mismo nombre del anterior, seguido de punto, y el nombre 
que queramos, como “textoEnRojo.negrita”, creamos un nuevo estilo heredando todos los atributos de nuestro 
otro estilo. 


Referencias: 

O http://developer.android.com/guide/topics/resources/stvle-resource.html 

O http://developer.android.com/guide/topics/ui/themes.html 


Ejemplo de aplicar estilos 


Lo que haremos 

Vamos a tener varios TextViews que han de tener: 

O color rojo 
O un tamaño de 20sp 
O lOdp de margen 

O ajustados al contenido tanto por alto como pon ancho 
Algunos TextViews de ellos, aparte de todo lo anterior, además van a ser en negrita. 
También aplicaremos un fondo verde a toda la aplicación. 



Ilustración 13 - Ejemplo con dos TextView, uno con los estilos pedidos y otro además en negrita 
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Proyecto 


a \S DibujarUIEstilos 

> l¿3 src 

> gen [Generated Java Files] 

> B4, Android 4.4.2 

> EA Android Prívate Libraries 
¡¿3- assets 

> & bin 

> ¡25 libs 
a & res 

> drawable-hdpi 
& drawable-ldpi 

> & drawable-mdpi 

> (¿5? drawable-xhdpi 

> & drawable-xxhdpi 
a & layout 

tíactivitvmainjcml 

Jd^ra^ment_manTxml 

> (23- menú 
a (25? valúes 

dimens.xml 

Ja^trinqsjcm^^ 

| [a styles_mios.xml 
(o¡ styles.xml 
> \¿p values-vll 
> & values-v14 
> (23> values-w820dp 
AndroidManifest.xml 
[§bj icjauncher-web.png 
U) proguard-project.txt 
2) project.properties 
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Ficheros para la externalización de recursos 


¿Qué son? 

Ya hemos visto algunos como “strings.xml” o “colors.xml”, existen otros. Son 
ficheros XML que sirven para extraer del código ciertos valores. Por tanto, 
independizamos el código de los posibles valores que pueda tomar. 

Además, de tener varias veces el mismo valor repartido por diferentes 
ficheros o partes del código; al cambiarlo únicamente en estos ficheros, 
conseguiremos fácilmente cambiar el valor en todos los sitios de manera 
apropiada, y con un coste ínfimo de tiempo. 


¿Cuáles existen? 

O Bool: valores de tipo boolean 

O Color: valores hexadecimales que representan colores 

O Dimensions: valores de dimensión (normalmente dp o sp) que 
representarán medidas 

O ID: valores identificadores de recursos 

O Integer: constantes enteras como máximos y mínimos 

O Integer Array: igual que le de Integer pero en Array 

O Typed Array: Array de tipos de datos mezclados 


- £9 

> ^ Android 4.4.2 

> gá Android Prívate Libraries 
t> (29 &rc 

t> gen [Generated Java Files] 
assets 
[> bin 

> libs 
j res 

> fe> drawable-hdpi 
fe? drawable-ldpi 

|> fe? drawable-mdpi 

> fe? drawable-xhdpi 

> fe? drawable-xxhdpi 
t> & layout 

|> fe? menú 
s fe ? valúes 

[G strings.xml 
|Cl styles.xml 
fe?values-v11 

> fe? values-v14 

> fe> values-wRZOdp 
¡G AndroidManifest.xml 
^ icjauncher-web.png 
l_j proguard-project.txt 
H project.properties 


Referencias: 

O http://developer.android.com/guide/topics/resources/more-resources.html 


Bool (boolean) 

¿Qué es? 

Es un fichero que guarda constantes de tipo boolean (true o false). 

¿Por qué se usa? 

Para guardar un true o un false, según convenga. Un ejemplo sería el de desarrollo (por ejemplo, si lo ponemos a 
true mostrará los logs, si lo ponemos a false no), entre otros. 
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Color (colores) 

¿Qué es? 

Es un fichero que guarda valores hexadecimales que representan colores. 


¿Por qué se usa? 

Para guardar colores y no tener que memorizar, por ejemplo que #FFOOOO significa rojo. Todos los valores de 
color tienen delante un prefijo de una almohadilla Se suele utilizar el formato de color RGB (R rojo, G verde, 
B azul) de tipo #RRGGBB, pero también el ARGB (A alfa) poniendo #AARRGGBB 


Dimens (dimensiones) 

¿Qué es? 

Es un fichero que guarda constantes de valores de dimensiones en XML. Sus valores se representan de un 
número seguido de una unidad de medida (como ya se vio anteriormente, aunque se suelen utilizar dp y sp). 


¿Por qué se usa? 

Para guardar medidas como pueden ser tamaño de los márgenes, tamaño de la fuente de la letra, anchura o 
altura de Views, etc. 


Id (Identificador de recurso) 

¿Qué es? 

Es un fichero que guarda identificadores únicos, que se autogenerarán en el fichero “R.java”. 


¿Por qué se usa? 

Para no tener que declarar los identificadores en los propios recursos y poder saber si estamos repitiendo 
alguno o no. Además, a la hora de asignarlo en un recurso hay que tener en cuenta que no lo creamos (no 
utilizamos el símbolo de suma, como por ejemplo "@+id/mi_id"), sino que llamamos a un identificador ya creado 
(sin utilizar el símbolo de suma, como por ejemplo "@id/mi_id"). 


Integer (Número entero) 

¿Qué es? 

Es un fichero que guarda una constante numérica entera con un nombre. 


¿Por qué se usa? 

Para guardar constantes como la velocidad máxima o mínima. 
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Integer Array (Colección de números enteros) 

¿Qué es? 

Es un fichero que guarda arrays de constantes de números enteros. 


¿Por qué se usa? 

Para guardar constantes, por ejemplo, un array con números primos 


Typed Array (Colección de valores Upados) 

¿Qué es? 

Es un fichero que guarda arrays de constantes de datos de diferentes tipos. 


¿Por qué se usa? 

Para guardar colecciones de constantes de diferentes tipos de datos, como por ejemplo, un array con los colores 
que definen el arcoíris, o un conjunto de identificadores a de la carpeta “drawable” que vayan a estar en una 
determinada Activity. 
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Eventos 


Eventos de Java 


¿Qué es la “programación dirigida por eventos” o lo que es lo mismo “programación orientada a eventos”? 


Android utiliza el lenguaje 
Java con su compilador, por 
lo que soporta la 
“programación orientada 
por eventos”. Android la 
utiliza en todas sus facetas, 
por lo que necesitamos 
entenderla de manera muy 
precisa. 

Este paradigma tan solo 
indica que no vamos a 
seguir una linealidad en el 
código, sino que se 
ejecutarán ciertos 
fragmentos de código 
cuando ocurra cierta acción 
(en un “evento” concreto). 

Un ejemplo muy rápido es 
el de un editor de revistas y 
su suscriptor. El suscriptor 
quiere unas revistas para 
hacer algo con ellas, para 
conseguirlas, el suscriptor 
tiene dos opciones: 

A. Preguntar todo el 
rato al editor de 

revistas si ya las 
tiene preparadas 

B. Suscribirse al editor 

de revistas y que 
este le avise 
cuando estén listas 


Programación 

secuencial 

1- Iteración 



que pregunta en bucle hasta Editor 

obtener las revistas 


2- Iteración 



N- Iteración 





Programación 
dirigida por eventos 

Primera llamada 

Me quiero suscribir 
a sus revistas 


Suscriptor Editor 

De acuerda^ te las enviaré 
cuando estén preparadas 



Transcurre el tiempo 



Revistas listas 

Ya están preparadas las revistas, 
haz lo que quieras con ellas 



Si has observado la imagen entre la diferencia de la “programación secuencial” y la “programación dirigida por 
eventos”, seguro que te habrás dado cuenta que para ciertas acciones puede resultar muy ineficiente preguntar 
todo el rato. En programación sería, por ejemplo, preguntar todo el rato a un botón si ha sido pulsado para hacer 
algo cuando se pulse. Es decir, un bucle “while” mientras no pulsado sería muy ineficiente, además de consumir 
procesador y por ello batería (Además de tener que hacerlo en un hilo en segundo plano para no bloquear el 
programa, suena hasta complicado para hacer tan poco). 
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De ahí surgió la “programación dirigida por eventos”, de la necesidad de esperar a que algo ocurra sin las 
contras anteriores. De una manera muy sencilla podemos suscribirnos a un evento, que en el momento en el 
que ocurra nos avise y podamos hacer algo. 


Es decir, el flujo del programa lo controlan los eventos. Eventos que pueden ocurrir tanto por acciones del 
usuario (por ejemplo, pulsar un botón o escribir en un campo editable), como a la espera de que termine otra 
parte de código (por ejemplo, esperar a que termine de descargar imágenes de internet o que finalice un hilo). 

La “programación dirigida por eventos” consta de dos partes implicadas en el proceso (puedes revisar el la 
imagen del ejemplo anterior para comprobar que los nombres tienen sentido): 

O Editor: emisor del evento (cuando pase algo enviará el evento) 

O Suscriptor: consumidor del evento (al recibir el evento se encarga de controlar que va a ocurrir). 
Normalmente lo veremos con el nombre de “Listener” (porque un suscriptor es quien escucha a un 
editor a la espera de que termine el evento al que se suscribió) y con el prefijo (lo veremos más a fondo 
en el tema de multitarea): 


o On: para indicar que se ejecutará en primer plano (hilo principal encargado de controlar las 
vistas) 

o Do: para indicar que se ejecutará en segundo plano (en un hilo secundario) 


¿Cómo se utilizan los eventos en Android? 

Si queremos suscribir los métodos de una clase llamada “MiOnClickListener.java” al evento OnClick (evento que 
se lanza al pulsar el botón) del botón que será el editor, tendremos que llamar al método de suscripción 
apropiado. En este caso es tan fácil como pasarle nuestro objeto de tipo “MiOnClickListener.java” a suscribir a 
setOnClickListener(). 


Button bt = (Button) findViewByld(R.id. button$activity_main$pulsame ) ; 
MiOnClickListener miListener = new MiOnClickListener(); 
bt . setOnClickListener (miListener) ; 

Clase que contiene métodos 
que se ejecutarán cuando 



ocurran ciertos eventos 
onClickQ 

Código a ejecutar 
cuando el botón sea 
pulsado 


Botón 


[Ed itor] 

(Nota: no es la vista del botón, sino el 
objeto Button que llamara a onClick[) 

y por tarrto ejecutará s u interior) 


Al pasar el objeto al método “setOnClickListenerO” nos fijaremos que a su vez este objeto tendrá que ser una 
implementación de “OnClickListener” (nos lo pedirá Eclipse). La razón es que necesitamos una interfaz común 
entre el editor y el suscriptor (es decir, el desarrollador contratado por Google que hizo la biblioteca de Android 
“OnClickListener” tiene que llamar a un método que nosotros sepamos cual es para poder utilizarlo; por esto 
utilizamos una implementación de una interfaz común de comunicación entre su código y el nuestro). Al pulsar 
el botón, el botón sabe que tiene que llamar a un método de un objeto que implemente “OnClickListener”, que 
en este caso es un único método “onClickO”. Sobrescribiremos el método “onClickO” cuyo interior tendrá lo que 
queremos que suceda al pulsarse (este código de este método “onClickO” quedará a la espera de que el usuario 
pulse el botón). Por lo que nuestra clase que hará algo cuando se pulse quedará (en el momento en que se 
pulse el botón ejecutará el código que haya en lugar del comentario): 
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import android.view.View; 

import android.view.View.OnClickListener; 


public class MiOnClickListener implements OnClickListener { 

@Override 

public void onClick(View v) { 

//Un código a ejecutar cuando ocurra algo 

} 

} 

Al pulsar el botón, el editor (el objeto de tipo “Button”) llamará al onClick() de la interfaz común que implementa 
de “OnClickListener". Como nuestro objeto “miListener” está escuchando, será llamado su método onClick() y 
por tanto su código interno. 



Clase que contiene métodos 
que se ejecutarán cuando 
ocurran ciertos eventos 

onClickQ 

Escucha el evento y 
ejecuta el código de su 
interior 

[Suscriptor] 


¿Qué posibilidades nos ofrece Android para escuchar un evento de una View? ¿Existe alguna manera que no 
suponga crear más ficheros de clases para programar eventos? 

Respondo a las dos preguntas con las siguientes maneras (nota: a la hora de importar se darán a elegir entre 
varias bibliotecas “OnClickListener”, para estos ejemplos utilizamos “android.view.View.OnClickListener”): 

O Clase que implementa una interfaz de un Listener: es igual que hicimos en el ejemplo anterior, solo que 
podemos utilizar implementar directamente de una Activity, un Fragment, o lo que queramos; para evitar 
tener clases que únicamente se utilizan en una de nuestras clases. Luego para suscribir el evento al 
setOnClickListenerO bastará con pasar la misma clase con un “this”. Un ejemplo sería: 



O Clase anónima: Los anteriores ejemplos de implementar una clase están muy bien y funciona 
perfectamente. Pero no es la manera más corta y de mejor lectura (en la anterior pregunta lo he 
explicado para que se entienda el conjunto de lo que pasaré a resumir). Podemos hacer lo mismo 
ahorrando mucho código y de una manera más comprensible (así será como lo verás los códigos por 
Internet). Sabemos que la clase “MiOnClickListener.java” solo servirá para ser suscrita a un único editor, 
por lo que podemos utilizar una clase anónima (clase sin nombre que crea un objeto en un único 
instante del código y que no se reutilizará porque no hace falta). Con el siguiente poco de código ya 
estamos escuchando a nuestro botón: 
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Button bt 


(Button) findViewByld(R.id. button$activity_main$pulsame ) ; 


bt .setOnClickListener (new OnClickListener() { 

@Override 

public void onClick(View v) { 

// Un código a ejecutar cuando ocurra algo 



O Desde una View en el editor: podemos asignar directamente desde XML un método con el nombre que 
queramos que se ejecute cuando el botón sea pulsado. Las pegas de este modo es que no todos los 
eventos se pueden asignar así; y que el autocompletar no funciona, por lo que no nos podrá ayudar a la 
hora de completar el código. Para el diseño XML tenemos que asignar ponerle al botón la propiedad 
“android:onClick” con el nombre del método que tendrá el suscriptor. 


res/layou1/act¡vity_ma i n .xml 


<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android” 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 

tools:context = "${ relativePackage}. ${ activityClass} " > 

<Button 

android:id= "@+id/button$activity_main$pulsame" 

android:layout_width= "wrap_content" 

android:layout_height= "wrap_content" 

android:layout_alignParentTop= "true" 

android:layout_centerHorizontal= "true" 

android:layout_marginTop= ”70dp" 

android:onClick= "onPulsame " 

android:text= "Púlsame" /> 

</RelativeLayout> 

Y para el código de Java nos podemos ahorrar buscar al botón, ya que está suscrito desde el XML. Necesitamos 
que en la clase exista un método, exactamente con el mismo nombre que pusimos en la propiedad 
“android:onClick”, y que le llegue una View como parámetro. 


MainActivity.java 


public class MainActivity extends Activity { 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. activity_main ); 

} 


public void onPulsame(View v) { 

// Un código a ejecutar cuando ocurra algo 

> 


> 

Como guía, si estás aprendiendo como se manejan los eventos te recomiendo que utilices el primer ejemplo de 
la anterior pregunta (crear una clase aparte con la implementación) o “Clase que implementa una interfaz de un 
Listener” para entender bien el funcionamiento de los eventos. A los pocos usos, que te veas que manejas los 
eventos con soltura, podrás pasar a la “clase anónima” que personalmente recomiendo. 


¿Cómo afecta a la utilización de variables dentro de clases anónimas? 

La teoría de Java nos dice que una clase anónima: 

1. Tiene acceso a los miembros de la clase que la encierra. 

2. No tiene acceso a variables locales en el alcance que lo encierra (enclosing scope), a menos que estén 
declaradas como “final” (variable imposible de cambiar una vez declarada, inmutable). Es decir, que si 
no son “final”, la clase anónima no podrá acceder a las variables del método que la contiene. 
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3. Las variables declaradas dentro serán sombreadas (shadowing). Es decir, si dentro de la clase anónima 
declaramos una variable con el mismo nombre, que una ya existente que en la clase que encierra, se 
hará caso a la declarada dentro de la clase anónima y no a la de fuera. 

Esta teoría tiene su lógica cuando hablamos de eventos. Una cosa inherente a los eventos e que tendremos 
código esperando por su ejecución y código que ya ha sido ejecutado. En los ejemplos anteriores tiene que 
quedar claro que existirá código ya ejecutado en el pasado, cuando en el futuro el usuario quiera pulsar botón 
(quién sabe si tardará milisegundos u horas, la cosa es que hay código que ya ha sido ejecutado y otro que está 
esperando). 

El siguiente código incumple punto 2 de la teoría de Java sobre clases anónimas, arrojando un error en tiempo 
de compilación (error que dirá algo así como: “Cannot refer to the non-final local variable unTexto defined in an 
enclosing scope”): 



Por lo que hemos dicho antes, la variable está declarada cuando la ejecución ya pasó y solo se puede utilizar en 
el código secuencial onCreateQ. 

La solución del punto 2 de la teoría es hacer final a la variable para que no se pueda modificar fuera del evento: 

final String unTexto = "escrito fuera del evento"; 

Button bt = (Button) findViewByld(R. button$activity_ma±n$pulsame ) ; 
bt .setOnClickListener (new OnClickListener() { 

@Override 

public void onClick(View v) { 

unTexto = "escrito dentro del evento"; 

} 

}) ; 

Pero lo anterior puede no satisfacernos, ya que no podremos modificar la variable y puede que sí queramos 
modificarla. Otra aproximación es la de escribir las variables como globales, para poder utilizarlas dentro y fuera 
del evento (Como dice el punto 1 de la teoría). Podremos modificarla fuera del evento, y al momento en que 
alguien pulse el botón dentro del evento. 


MainActivity.java 


public class MainActivity extends Activity { 
private String unTexto; 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; 
setContentView(R.layout. activity_main ); 

unTexto = "escrito fuera del evento"; 

Button bt = (Button) findViewByld(R.id. button$act± vi ty_main$pulsame ) ; 
bt .setOnClickListener (new OnClickListener () { 

@Override 

public void onClick(View v) { 

unTexto = "escrito dentro del evento"; 


}) ; 


} 

Ahora bien, para entender el tema del sombreado (punto 3 de la teor) necesitamos ver en cuántos sitios 
podemos declarar variables y de este modo poder utilizarlas en nuestro, que son: 

O Variable global: podemos evitar el sombreado llamándola con “Clase.this.variableGlobal” 
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O Variable local de método: no se puede evitar el sombreado 

O Variable global de clase anónima: podeos evitar el sombreado llamándola con 

“this.variableGlobalAnonima” (dentro de una clase anónima, el “this” apunta a todo el alcance de la 
clase anónima, no fuera de ésta) 

O Variable local de método de clase anónima: es la que sombrea, por lo que la podemos llamar 
directamente 

Un ejemplo de cada una de estas sería: 


MainActivity.java 


public class MainActivity extends Activity { 

prívate String unTexto = "variable global de la clase externa"; 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; 
setContentView(R.layout. activity_main ) ; 

final String unTexto = "variable local del método de la case externa (será sombreada, por 
tanto no se utilizará)"; 

Button bt = (Button) findViewByld(R.id. button$act± vi ty_ma±n$pulsame) ; 
bt .setOnClickListener (new OnClickListener() { 

prívate final String unTexto = "variable global de la clase anónima"; 

@Override 

public void onClick(View v) { 

String unTexto = "variable local del método de la clase anónima"; 

Log. v("test", unTexto); 

Log.v( "test" , this.unTexto); 

Log.v( "test" , MainActivity. this . unTexto) ; 


}) ; 


Y cuando pulsáramos el botón nos devolvería el logcat la siguiente salida: 


-variable local del método de la clase anónima 
-variable global de la clase anónima 
-variable global de la clase externa 


¿Por qué el método “onCllck” le llega como parámetro un objeto de tipo View? 

Esta View Android nos la pasa como parámetro de “onClick(View v)” para facilitarnos todavía más la vida a los 
desarrolladores (para evitar tener que declararla como global o final, por la teoría de las clases anónimas de la 
anterior pregunta). Esta View devuelta es en realidad la View editora del evento. En el caso de los anteriores 
ejemplos es el mismo Button el que nos devuelve la View. Como recordatorio sabemos que Button extiende de 
View, por lo que tendremos hacer un cast de la View a Button para poder utilizarla y luego ya podremos hace lo 
que queramos con la variable de tipo Button dentro del evento. Ejemplo de cambiar el texto al botón: 

Button bt = (Button) findViewByld(R.id. button$act± vi ty_main$pulsame ) ; 
bt .setOnClickListener (new OnClickListener() { 

@Override 

public void onClick(View r) { 

Button btDentro = (Button) v; 

btDentro .setText( "Botón pulsado") ; 

} 


}) ; 

¿Todo esto solo funciona para “onCllck”? 

Hemos explicado solo un Listener de los muchos que hay. Todos funcionan igual a la hora de programarlos en 
Java, aunque se ejecutarán para eventos diferentes. 
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¿Se pueden usar expresiones Lamda de Java para los eventos? 

Las expresiones Lamda se incorporaron en el JDK 1.8 de Java. Android de momento solo compila hasta el JDK 
1.7, por lo que de momento no. Presumiblemente se podrá en un futuro. 


Referencias: 

O http://es.wikipedia.org/wiki/Arquitectura dirigida por eventos 
O http://es.wikipedia.org/wiki/Programaci%C3%B3n dirigida por eventos 

O http://docs.oracle.com/iavase/tutorial/iava/iavaOO/anonymousclasses.html 
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Ejemplo simple de utilización de eventos 


Lo que haremos 

Al pulsar el botón cambiaremos el color a un texto y cambiaremos su texto. Además, el botón también cambiará 
de texto y se quedará deshabilitado para que no se pueda volver a pulsar. 



Ilustración 14 - Estado Inicial del programa 



Ilustración 15 - Después de pulsar el botón 
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Proyecto 


é (25 Eventos 
a 29 src 

a ffl com.jarroba.eventos 

[> ^9 gen [Generated 

Android 4.4W 

> |{i Android Prívate Librarles 
2b assets 


> 2b bin 

> 2b libs 
a 2b res 

> ^ drawable-hdpi 

drawable-ldpi 

> drawable-mdpi 

> drawable-xhdpi 

> ^ drawable-xxhdpi 

> £> valúes 

> values-vll 

> fe- values-v14 

[o] AndroidManifest.xml 
,fc, icjauncher-web.png 
[§) proguard-project.txt 
[§) project.properties 



res/drawable-mdpi/estados_del_boton.xml 


<RelativeLayout xmlns: android="http ://schemas.android.com/apk/res/android" 
xmlns: tools="http ://schemas.android.com/tools" 
android: layout_width="match_parent " 
android: layout_height="match_parent" 

tools: context="$ {relativePackage}.${activityClass}" > 

<Button 

android: id=" @+id/button$activity_main$pulsame" 
android: layout_width="wrap_content " 
android: layout_height="wrap_content " 
android:layout_alignParentTop=" true" 
android:layout_centerHorizontal=" true" 
android:layout_marginTop=" 130dp" 

android: text="Púlsame y cambia el color al texto" /> 

CTextView 

android: id=" @+id/textView$activity_main$coloréame" 
android: layout_width="wrap_content " 
android: layout_height="wrap_content " 

android:layout_below=" @+id/button$activity_main$pulsame" 
android:layout_centerHorizontal=" true" 
android: layout_marginTop="36dp" 
android: text="Cámbiame de color" 

android:textAppearance=" Tandroid:attr/textAppearanceLarge" /> 
</RelativeLayout> 
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Pasar eventos desde Fragments 

¿Para qué quiero pasar eventos desde un Fragment? 

Supon que tienes un listado en un Fragment a la izquierda, y a la derecha tienes el detalle del listado en otro 
Fragment ¿Cómo pasarías la información de que el usuario a pulsado sobre una fila del Fragment del listado al 
Fragment del detalle? Lo veremos aquí y ampliaremos en temas más adelante. 


¿Cómo se pasan eventos de un Fragment a fuera de esta? 

Mediante eventos. Te respondo con la propia pregunta, ya que necesitaremos crear nuestro propio editor que 
será el Fragment que quiere comunicar el evento en cierto momento. Por lo que necesitaremos gestionar 
nuestros propios callbacks. 


¿Se puede pasar también información? 

Claro que sí, al fin y al cabo un evento es la información sobre un cambio de estado. Como tenemos que crear 
nuestros métodos le podremos pasar lo que queramos. 


¿Cómo ¡mplementar nuestro propio editor (callback o listener)? 

Se hace con interfaces. Necesitaremos lo siguiente: 

O Una interfaz: la interfaz común entre el editor y el suscriptor 
O Una clase que utilice los métodos de la interfaz: el editor 

O Una clase que ¡triplemente (rellene el contenido de) los métodos de la interfaz: el suscriptor (Hasta 
ahora solo hemos utilizado este punto, los otros dos nos lo daba la biblioteca de Android) 

Veamos un ejemplo simple en el que crearemos un evento a la espera de 
que se procese algo. Este algo lo simularemos con un “sleepO” que haga 
dormirse al hilo (hago notar que esto es un ejemplo para ver que el evento 
se ejecutará en un tiempo que no sabemos, nunca hay que hacer esperar al 
hilo principal) y que al despertarse lance nuestro evento, notificando a todos 
los suscriptores a este evento. 

Empezaremos definiendo una interfaz que he llamado “OnMiListener.java” 

(para que los asocies con el ejemplo del botón, podría haber llamado a esta 
clase “OnClickListener.java”) con un método “onTodoProcesadoO” (este 
podría haberlo llamado “onClickO”) que además le paso una variable (podría 
haber sido “View”): 


OnMiListener.java 


public interface OnMiListener { 

public void onTodoProcesado (long tiempoTotal) ; 

} 

Una clase implementará los métodos del interfaz y así tendría algo que hacer cuando se todo fuera procesado. 
Antes vamos a crear el editor de eventos, que será la clase que utilice los métodos de la interfaz. La llamaremos 
“ClaseEditoraDeEventos.java” (en la asociación con el botón de antes, sería la clase “Button”). Para que sea 
simple, lo único que hará será esperar unos segundos aleatorios y cuando acabe llamará a nuestro método 
“onTodoProcesadoO”; desde luego, para llamara este método tiene que pasarse un objeto del tipo de la interfaz 
“OnMiListener.java” con el método ya implementado. 


* 0 s-rc 

> ^^laseÉdlto^DeEventosjava 
[> [7] MainActivity.java 
(> [7] OnMiListener.java 
0 ^ ger^jener^te^av^Nes^^ 

> Android 4.4W 

|> ¡^Android Prívate Libra ríes 
[¿Ü7 assets 
t> üf> bin 
0 libs 

> ^ res 

(G AndroidManifest.xml 
llb| icjauncher-web.png 
l_j proguard-project.txt 
§] project.properties 
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ClaseEditoraDeEventos.java 


public class ClaseEditoraDeEventos { 


public ClaseEditoraDeEventos (OnMiListener listener) { 

//Simula el tiempo aleatorio de descargar una imagen, al dormir unos 
milisegundos aleatorios al hilo en segundo plano 

long tiempoEnDescargar = (long) (Math. random () * 10); 

try { 

Thread. sleep (tiempoEnDescargar) ; 

listener .onTodoProcesado (tiempoEnDescargar) ; 

} catch (InterruptedException e) { 
e .printStackTrace() ; 

} 


} 


} 

Ya tenemos todo. Ahora nos queda lo fácil, lo que ya hemos hecho en otras ocasiones, que es implementar los 
métodos de la interfaz. Vamos a usar la clase “MainActivity.java” para poder ejecutar esta aplicación. Aquí 
tendremos que hacer lo de siempre, implementar al escuchador, el “OnMiListener”; implementar los métodos, 
en este caso “onTodoProcesadoO”; y suscribirnos al evento pasándole el objeto con “this” al objeto del tipo 
“ClaseEditoraDeEventos” (también tendremos la opción de utilizar una clase anónima, como ya se vio). 



Ya está. Si ejecutamos veremos cómo efectivamente el objeto suscrito recibe el evento y muestra por el LogCat 
el texto que hemos puesto: 


-Se ha procesado todo en este tiempo: 5 


¿Cómo se pasa un evento generado desde un Fragment a su Activity contenedora? 

Es muy interesante saber cómo pasar eventos (y por tanto información) desde un Fragment a la Activity 
contenedora de este Fragment. 

Se hace exactamente igual que hemos visto en la anterior pregunta. Esta vez la clase editora de eventos será el 
propio Fragment (es quien tiene que avisar cuando se lance el evento). 

Solo nos faltan unas consideraciones de los eventos de los Fragments, en relación a su ciclo de vida y los 
eventos, que no hay que dejar nunca pasar: 

O Solo podrá suscribirse la Activity a los eventos del Fragment cuando el Fragment exista (sino no tiene 
sentido). El mejor momento es hacerlo en el “onAttachO” (recuerdo del ciclo de vida del Fragment, que 
se ejecuta en cuanto el Fragment se ha adjuntado a la Acitvity contenedora); que para ello nos devuelve 
la Activity que contiene a este Fragment. Esta Activity tiene que implementar al 100% de nuestro interfaz 
“OnMiListener”, por realizando un cast obtenemos la implementación. Fíjate que digo al 100% o dará 
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error, para que no se nos olvide existe manera elegante de comprobar si la Activity contenedora está 
implementando o no de la interfaz que necesita el Fragment: mediante un “try y catch”; esto nos 
recordará como desarrolladores que la tenemos que implementar, para que no se nos olvide, ya que nos 
dará error sino lo hacemos y nos mostrará nuestro mensaje recordándonos que tenemos que 
implementar de la interfaz. 


prívate OnMiListener mListener; 

QOverride 

public void onAttach(Activity activity) { 
super .onAttach(activity) ; 

try { 

mListener = (OnMiListener) activity; 

} catch (ClassCastException e) { 

throw new IllegalStateException( "La clase " + activity.toString() + " debe implementar de la 
interfaz " + OnMiListener. class .getName() + " del Fragment al que quiere escuchar") ; 

} 

} 

O Al contrario, cuando el Fragment deja de estar sobre la Activity contenedora, no puede haber eventos de 
esta (ya que no existirán). Por ello en el “onDetachO” (recuerdo del ciclo de vida, que se ejecuta quitarse 
el Fragment de la Activity contenedora) pondremos una implementación vacía (en el siguiente ejemplo 
he llamado “mListenerVacio”) 


prívate static OnMiListener mListnerVacio = new OnMiListener() { 

QOverride 

public void onTodoProcesado (long tiempoTotal) { 

//Evento vacío para que no haya problemas en algunos momentos del ciclo de vida del Fragment 



@Override 

public void onDetach() { 
super . onDetach() ; 

mListener = mListnerVacio ; 

} 

O Es bueno que al inicializar el Fragment la variable que guarda la 

implementación (he llamado en el código de abajo “mListener”), se inicie con la 
implementación vacía. 

prívate OnMiListener mListener = mListnerVacio; 

El resto es exactamente igual a como lo vimos anteriormente. La estructura del 
programa lo puedes ver a la derecha, reutilizaremos por completo el código de 
“OnMiListener.java” de la anterior pregunta. 

Indicar que el resultado del programa será el mismo que en la pregunta anterior. 

El código completo de “MiFragment.java” es (la variable “TAG_MI_ACTIVITY” veremos 
su significado en la siguiente pregunta): 


4 

é I ~s src 

á conmiarroba^^_^^_ 
t> ^MaínActívítyjav^ 
t> [T) MiFragment.java 
> [7] OnMiListener.java 

> ¿b gen [Generatei 

> Eft Android 4.4W 

> Eft Android Prívate Libraries 
¡¿b assets 

> ¡¿b bin 

> ¿b libs 

> Ib res 

[g] AndroidManifest.xml 
fe icjauncher-web.png 
[§) proguard-project.txt 
[§) project.properties 
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try { 


mListener = (OnMiListener) activity; 

} catch (ClassCastException e) { 

throw new IllegalStateException( "La clase " + activity.toString() + " debe 
implementar de la interfaz " + OnMiListener. class .getName() + " del Fragment al que quiere escuchar") ; 
} 


} 

@Override 

public void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState ); 

//Simula el tiempo aleatorio de descargar una imagen, al dormir unos milisegundos aleatorios 
al hilo en segundo plano 

long tiempoEnDescargar = (long) (Math. random ( ) * 10); 

try { 

Thread. sleep (tiempoEnDescargar) ; 

mListener .onTodoProcesado (tiempoEnDescargar) ; 

} catch (InterruptedException e) { 
e .printStackTrace(); 

} 


} 

OOverride 

public void onDetach() { 
super .onDetach(); 
mListener = mListnerVacio ; 

} 

} 

En este ejemplo he utilizado un Fragment sin interfaz gráfica (en el ejemplo completo de más abajo podrás ver 
un ejemplo con interfaz gráfica, por si este de primeras no te queda del todo claro), para simplificar el código y 
explicar otras cosas además. 

No extiendo más la respuesta a esta pregunta. Para que quede bien claro te recomiendo que hagas el ejemplo 
completo de más abajo que se llama: “Ejemplo de escuchar un evento (y pasar información) de un Fragment a la 
Activity contenedora”. 

El código de “MainActivity.java” lo muestro en la siguiente pregunta para aprovechar a contar algo nuevo. 


¿Cómo añado un Fragment sin interfaz gráfica a una Activity contenedora? 

Si te fijas del ciclo de vida del Fragment -llamado “M¡Fragment.java”- de la anterior pregunta: no existe el 
método “onCreateViewO” que mediante el método “inflateO” le proporciona la interfaz gráfica al usuario. 

Podemos utilizar un Fragment sin interfaz gráfica para realizar operaciones y que el usuario no las vea, pero que 
aun así quede el código modular en Fragments. Esto es muy útil si por ejemplo en un Smartphone no 
necesitemos hacer cierta operación que sí necesite hacerse en un Tablet (una operación es algo sin interfaz 
gráfica y si no se necesita no va a estar ocupando memoria). 

Reutilizo y completo el ejemplo de la anterior pregunta. 

Para crear un Fragment sin interfaz gráfica necesariamente tenemos que añadir el Fragment a la Activity 
contenedora de manera dinámica, desde Java. Los pasos a seguir son para añadir el Fragment sin interfaz 
gráfica a la Activity contenedora son: 

1. Obtener el interfaz para interactuar con Fragments dentro de la Activity con “getFragmentManagerO” 

FragmentManager fragmentManager = ¡getFragmentManagerO; 

2. Comenzaremos una nueva transacción al añadir (al usar “add()”) este Fragment con 

“beginTransactionO” 

FragmentTransaction fragmentTransaction = fragmentManager .beginTransaction(); 

3. Obtendremos una instancia del Fragment que queramos añadir 

MiFragment mifragment = new MiFragment(); 
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4. Añadiremos con “add()” a la transacción, además le pondremos un identificador para si tenemos que 
volver a buscarlo en un futuro (lo suyo es que sea una variable global estática y final en el propio 
Fragment, para tener acceso desde sitios) 

public static final String TAG_MI_FRAGMENT = "IdentificadorDeMiFragment"; 

fragmentTransaction. add (mifragment , TAG_MI_FRAGMENT ) ; 

5. Para terminar aceptamos todas las modificaciones (en este caso añadir un Fragment nuevo) con 
“commitO”. En este momento el Fragment estará adjuntado a la Activity contenedora (se llamará al 
“OnAttachO” del Fragment y demás ciclo de vida) 

fragmentTransaction . coiranit(); 

Una nota al importar bibliotecas: importa siempre los que empiecen por “android.app” como 
“android.app.FragmentManager” o “android.app.FragmentTransaction”. 

Y ya el código completo. Recuerdo que implementamos de “OnMiListener” para continuar con el anterior 
ejemplo. 


MainActivity.java 


public class MainActivity extends Activity implements OnMiListener { 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; 

FragmentManager fragmentManager = getFragmentManager(); 

FragmentTransaction fragmentTransaction = fragmentManager .beginTransaction(); 
MiFragment mifragment = new MiFragment(); 

fragmentTransaction .add (mifragment, "IdentificadorDeMiFragment" ); 
fragmentTransaction .commit(); 

} 


@Override 

public void onTodoProcesado (long tiempoTotal) { 

Log.v( "test" , "Se ha procesado todo en este tiempo: " + tiempoTotal); 

} 


} 

¿Para añadir un Fragment con interfaz gráfica de manera dinámica, es decir, desde Java se hace igual? 

Sí, solo que cambiando el método add() con uno que tenga una View que sirva de contenedora para la interfaz 
gráfica (lo veremos en los siguientes temas con ejemplos). El tag es opcional, ya que podemos encontrar al 
Fragment recorriendo el árbol de Views. 

public static final String TAG_MI_FRAGMENT = "IdentificadorDeMiFragment"; 
fragmentTransaction.add(R.id.viewContenedora, mifragment, TAG_MI_FRAGMENT ) ; 

¿Cómo se pasa un evento o información de la Activity contenedora a un Fragment que esta contiene? 

Simplemente desde la Activity podremos llamar a métodos del otro Fragment. 

Para ejemplificar esto hemos creado un ejemplo completo más abajo, llamado “Ejemplo de escuchar un evento 
(y pasar información) de un Fragment a otro” 


Referencias: 

O http://larroba.com/programar-fragments-fragmentos-en-androld/ 

O http://larroba.com/fragments-fragmentos-en-android/ 

O http://developer.android.com/guide/components/fragments.html 
O http://developer.android.com/tralning/basics/fragments/communicating.html 
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Ejemplo de escuchar un evento (y pasar información) de un Fragment a la Activity 
contenedora 

Lo que haremos 

Tendremos una Activity contenedora (para diferenciarlo pintaremos su fondo de rojo) que contiene un único 
Fragment (para diferenciarlo estará coloreado de verde claro). El Fragment tendrá un botón para que al ser 
pulsado ha de cambiar un texto de sobre Activity contenedora (por tanto fuera del Fragment). 



Texto a cambiar. Estoy en 
Activity 


Fragment 


púlsame. 


EventoDeFragmentAActivity 


Ilustración 16 - Estado Inicial de la aplicación 



Ilustración 17 -Al pulsar el botón el texto de la Activity contenedora cambia 
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Proyecto 


é 0 EventoDeFragmentAActivity 
a 03 src 

a ffl com.jarroba.eventodef raqmentaactívity 
I^^MamActivItyjaval 

>10 MiFragment.java | 

[> '¿3 ge^üene3e^£w^R!e^ 

> E& Android 4.4W 

S& Android Prívate Librarles 
¡e> assets 
t> ¡ci> bin 

> libs 
a ¡Ü 3 . res 

t> fe drawable-hdpi 
fe drawable-ldpi 
t> fe drawable-mdpi 
[> fe drawable-xhdpi 
t> fe drawable-xxhdpi 
a fe 

| |cf activity_main.xml I 

jq¡ mi_fragment.xml | 
t> fe menú 
t> fe valúes 
t> fe values-vll 
> fe values-v14 
t> fe values-w820dp 
ÉL AndroidManifest.xml 
% icjauncher-web.png 
0 proguard-project.txt 
(g| project.properties 
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@Override 

public void onAttach(Activity activity) { 
super .onAttach(activity); 

try { 

mListener = (OnMiClickListener) activity; 

} catch (ClassCastException e) { 

throw new IllegalStateException( "La clase " + activity.toString() + " debe 
implementar de la interfaz " + OnMiClickListener. class .getName() + " del Fragment al que quiere escuchar"); 
} 

} 

@Override 

public void onDetach() { 

super .onDetach(); 
mListener = mListnerVacio; 

} 

} 
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Ejemplo de escuchar un evento (y pasar información) de un Fragment a otro 

Lo que haremos 

Tendremos una Activity contenedora (para diferenciarlo pintaremos su fondo de rojo) con dos Fragments (para 
diferenciarlos los pintaremos uno de verde claro y el otro de verde oscuro). Uno de los Fragments con un botón y 
el otro con un texto que queremos cambiar al pulsar el botón. 

Además, aprovechando que el evento tiene que pasar por la Activity contenedora, pondremos una imagen sobre 
la Activity contenedora que cambiará también al pulsar el botón. 



Púlsame y cambia el texto dd 
Fragment de abajo [ 


Cambiar este texto 


.A w 3.21 

EventoDeFragmentAFragment 


Ilustración 18 - Estado Inicial de la aplicación 



Ilustración 19 - Una vez pulsado el botón, se cambiará la Imagen de la Activity contenedora y el texto del otro Fragment 
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Proyecto 


a Q3 Evento DeFragmentAFragment 
a 0 src 

a c o m ,j a rro b a. evento d efra g m entafra g m ent 

Mi] Fragmentlnferior.java 

[> l[T| F ra g m entSu p eri o r.j ava 
> |^^^la¡nAct¡v¡^^av^^ 
t> gen [Generated Java Files] 

> Android 4.4W 
t> ^ Android Prívate Librarles 
^ assets 
t> & bin 
t> & libs 
a & res 

0 £> drawable-hdpi 
drawable-ldpi 
t> drawable-mdpi 
£ 5 ? drawable-xhdpi 
t> £¡7 drawable-xxhdpi 

G act¡v¡ty_mam.xml 
G fragmentjnferior.xml 
¡ef fragment_superior.xml 
t> £ 5 ? menú 
t> valúes 
t> va lúes-vil 
t> £7 va lúes-vi 4 
t> £7 values-wSZOdp 
G AndroidManifest.xml 
IB icjauncher-web.png 
[P] proguard-project.txt 
[P] project.properties 
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@Override 

public View onCreateView(Layoutlnflater inflater, ViewGroup container, Bundle savedlnstanceState) { 
View rootView = inflater .Ínflate(R.layout. fragment_superior, container, false) ; 


Button boton = (Button) 

rootView. findViewByld(R.id. button$fragment_superior$botonDelFragmentSuperiorQueCambiaTexto ) ; 

boton .setOnClickListener (new OnClickListener() { 

@Override 

public void onClick(View v) { 

mListener .onClickEnMiBoton(v); 

} 


}) ; 


} 


return rootView; 


@Override 

public void onAttach(Activity activity) { 
super .onAttach(activity); 

try { 

mListener = (OnMiClickListener) activity; 

} catch (ClassCastException e) { 

throw new IllegalStateException( "La clase " + activity.toString() + " debe 
implementar de la interfaz " + OnMiClickListener. class .getName() + " del Fragment al que quiere escuchar"); 
} 


@Override 

public void onDetach() { 
super .onDetach(); 
mListener = mListnerVacio ; 


MainActivity.java 


public class MainActivity extends Activity implements OnMiClickListener { 
private ImageView imagen; 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; 
setContentView(R.layout. activity_main ) ; 

imagen = (ImageView) findViewByld (R. id. imagreView£activity_main£imagrenDeActivity) ; 


@Override 

public void onClickEnMiBoton(View v) { 

imagen .setlmageResource(android.R.drawable. stat_sys_download_done ); 

Fragmentlnferior flnferior = (Fragmentlnferior) 
getFragmentManager().findFragmentByld(R.id. fragment$activity_main$fragmentlnferior ) ; 

flnferior .comunicarmeConElFragment(); 

} 


} 
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Intent 




Navegación 


¿Qué es? 

Unen componentes individuales en tiempo de ejecución. Es 
decir, son paquetes asincronos (que contienen, por 
ejemplo, datos o acciones) que solicitan una acción a otro 
componente. Define un mensaje para activar un 
componente específico o un tipo de componente específico. 



Intent 


Dicho de otro modo, es una “intención” de hacer algo, como arrancar una Activity, tenemos la intención de 
arrancarla pero no la vamos a arrancar en el momento que se crea este Intent; se pasará a otro lado ésta 
intención para que ejecute su contenido, en este ejemplo iniciar una nueva Activity. 


De este modo un Intent es un objeto que actúa como mensaje para realizar una petición de una acción de otro 
componente 


¿Por qué se explica Intent en la navegación? 

Porque es la pieza clave para navegar entre Activity y pasar datos entre estas 

¿Dónde y qué componentes lo usan? 

Pongo una recopilación de dónde se utiliza y qué componentes lo usan: 

O Para iniciar una Activity: 

o Context.startActivity(): inicia una nueva Activity 

o Activity.startActivityForResultQ: inicia una nueva Activity, además solicita que le devuelva 
resultados cuando finalice de cargar la nueva Activity a la que la inició. 

O Para iniciar un Service (se verá en temas posteriores en profundidad): 

o Context.startServ¡ce(): inicia un nuevo Service o entregar nuevas instrucciones a alguno en 
ejecución 

o Context.bindService(): para ligarse con un Service, creándolo si no existe 

O Para enviar un Broadcast (se verá en temas posteriores en profundidad): 

o Context.sendBroadcast(): envía el Intent a todos los BroadcastReceivers interesados 

o Context.sendOrderedBroadcast(): Como el anterior, pero recibiendo datos desde el broadcast 

o Context.sendSt¡ckyBroadcast(): Como el primero, pero manteniendo el Intent aunque el 
broadcast se haya completado 
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¿Tipos de Intent? 


O 


Explícito: creado solo para el 
componente objetivo. Para el envío de 
mensajes y para instanciar clases de 
componentes de la misma aplicación. 
Ejemplo: arrancar una nueva Activity de 
la misma aplicación. Funciona del 
siguiente modo (mira la imagen 
mientras lees los siguientes puntos): 

1. Un componente (en la imagen 
de ejemplo un “MyActivity”) 

crea un Intent para iniciar otro 
de la misma aplicación (en el 

ejemplo “OtraActivity”). 



► 



2. Se le envía el Intent que hemos creado al sistema operativo Android a través de un método para 
arrancar componentes, como startActivityQ 


3. Android buscará en el AndroidManifestxml de nuestra aplicación el componente con el nombre 
de la clase que queremos iniciar (en el ejemplo queremos iniciar la Activity llamada 
“OtraActivity”), no siendo elegibles ninguna con otro nombre salvo el pasado 

4. Al encontrar el componente Android lo instanciará 


O Implícito: No tienen un objetivo claro. Son usados para activar componentes en otras aplicaciones. 
Android tiene que buscar el mejor componente que coincida con los parámetros del Intent. Para que la 
otra aplicación reciba el Intent, esta otra aplicación requiere de un Intent Filter configurado para que 
coincidan las estructuras asociadas (action, data, category), para así instanciar el componente adecuado 
recibido en el Intent. Ejemplo: desde la Activity de una App, se quiere llamar a otra Activity de otra 
aplicación que no es la nuestra, como la Activity que abre la cámara de fotos. Funciona así: 



B 


Intent implícito con: 

- ► • Action: ACTIO N_l MAGE_CAPTU RE 

• Category: DEFAULT 



O 


Aplicación de Correo 



1. Un componente (en la imagen de ejemplo un “MyActivity”) crea un Intent para iniciar otro de otra 
aplicación. Aquí no conocemos como se llama el componente de la otra aplicación, por lo que 
tenemos que usar unos filtros comunes (lo podemos encontrar en la documentación de Android 
en http://developer.android.com/reference/android/content/lntent.html) para comunicarnos de 
manera efectiva. Para esto utilizamos Action, Category y Data (en el ejemplo utilizamos solo 
Action con el valor “ACTION_IMAGE_CAPTURE” y Category con el valor “DEFAULT”). Indicar que 
Category ya estará añadido por defecto con “DEFAULT” y no hará falta que lo añadamos nosotros 
(Hago notar que lo que se pone en Action y en Category son constantes con un String creado por 
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Android para que sea común en todas las aplicaciones. Otra cosa, en los ejemplo para que 
quede más limpio pongo por ejemplo solo “DEFAULT”, para que funcione habría que poner 
“android.intent.category.DEFAULT”). 

2. Se le envía a Android el Intent que hemos creado a través de un método para arrancar 
componentes. Aquí es posible que nos interese que el otro componente de la otra aplicación nos 
devuelva un resultado cuando acabe (por ejemplo queremos usar la foto que haga la aplicación 
de la cámara al volver a nuestra Activity, que en el ejemplo he llamado “MyActivity”), por ello 
estará bien usarstartActivityForResult() 

3. Android buscará en todos los AndroidManifestxml de todas las aplicaciones todos los en los 
<¡ntent-filter> de todos los componentes de nuestro dispositivo, hasta encontrar todas las 
coincidencias con los criterios de búsqueda puestos en Action, Category y Data (en el caso del 
ejemplo queremos que coincida el Action y el Category del Intent con el <action> y <category> de 
los <intent-filter> de los AndroidManifest.xml). Si creamos nosotros la otra aplicación, es 
importante que definamos en el AndroidManifest.xml el <category> como “DEFAULT” para recibir 
los Intents implícitos (es justo lo que estás pensando, puedes utilizar esto para comunicar varias 
aplicaciones de tu creación). 

4. SI solo hay una coincidencia Android lanzará ese único componente de esa otra aplicación. Si 
hay varias coincidencias Android dejará elegir al usuario cuál utilizar. Si no hay ninguna, Android 
notificará al usuario. 


¿Cómo creo una Activity, envió y recibo datos entre ellas? 

Para enviar un dato a otra Activity e iniciarla lo primero que hay que hacer es crear un Intent en la Activity que 
iniciará a la otra. 

O Enviar datos: Los datos a pasar se llaman “Extras” por lo que llamaremos al método “putExtraQ” que nos 
pide dos parámetros, una clave para identificar el valor, y este valor -que es el dato que queremos pasar- 
identificado por la clave. El valor puede ser cualquier tipo primitivo (int, String, float, etc) y algunos 
complejos (veremos en otra pregunta como pasar objetos definidos por nosotros). Es recomendable que 
la clave sea única y que sea una variable global publica final y estática, para poder acceder a ella desde 
otras clases. 

public final static String CLAVE_EXTRA_PASAR = "claveDelDatoAPasarALaOtraActivity" ; 

Intent intención = new Intent(getApplicationContext(),ActivityQueQuieroIniciar. class) ; 

intención .putExtra( CLAVE_EXTRA_PASAR , textoAPasar ); 

startActivity (intención) ; 

O Recibir datos: Cuando se inicie la nueva Activity, para recibir los “Extras”, es decir los datos que nos 
manda la otra Activity, solo tenemos que obtener el Bundle con los datos con “getlntent().getExtras()” y 
ya de ahí obtener el valor primitivo que hayamos pasado. Por ejemplo, para obtener un “String” con 
“getStringO” o un “int” con “getlntQ” (para obtener objetos definidos por nosotros lo veremos en otra 
pregunta). A este método para obtener el valor hay que pasarle la clave que antes definimos, para 
obtener el valor específico que queremos y un segundo parámetro definirá el valor por defecto (no es 
obligatorio, pero lo recomiendo para que por si no nos devuelve ningún dato que no nos de problemas y 
obtengamos un dato controlable). 

Bundle bundle = getlntent() .getExtras () ; 

String textoRecibido = bundle.getString(LaAnteriorActivity. CLAVE_EXTRA_PASAR , "texto 

por si la clave no tiene asignado un valor") ; 
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¿Cómo iniciar una Activity que no sea de mi aplicación? 

Si utilizamos un Intent implícito, esto es abrir una Activity externa a nuestra aplicación. Seguramente nos 
interese detectar cuando volvamos a nuestra Activity y hacer algo con los datos que nos ha devuelto la Activity 
externa a nuestra aplicación. 

Supongamos el siguiente ejemplo: tenemos una Activity con un botón que al ser pulsado lanza la Activity de la 
cámara que está en otra aplicación de terceros. Al hacer la foto la aplicación del tercero se cerrará y volveremos 
a nuestra aplicación, a nuestra Activiy que lanzó la Activity externa. Para detectar el momento en que volvemos y 
para hacer algo con la foto realizada con la aplicación externa tenemos que rellenar el método 
onActivityforResultsQ. 



Mi Aplicación 

MyActivity 

-► startActivityForResult^-- 

< 


\ 

resuitCode que 

\ 

\ 

hayamos puesto 

i 

\ 

i 

' onActivityForResultQ <- - 

j 



Intent implícito con 
► • Action: ACTION _IMAGE_CAPTURE 

• Category: DEFAULT 




Intent devuelto con: 

• Data: clave "data" con 
valor un objeto con la foto 
que se ha hecho 


h"/PNH 



Para ello creamos un Intent implícito con una acción (el siguiente código muestra que se crea un Intent con una 
acción “MediaStore.ACTION_IMAGE_CAPTURE”, indicando a Android que queremos lanzar una aplicación que 
tenga alguna Activity capaz de captura una imagen). Para lanzar a la Activity utilizaremos startActivityForResultQ, 
al que pasaremos el Intent implícito, y un código (requestCode) que nos servirá a nosotros para diferenciar que 
hacer dentro del onActivityforResults(). 

prívate static final int REQUESTCODE_CAPTURA_DE_IMAGEN = 1; 

Intent milntent = new Intent(MediaStore. ACTION_IMAGE_CAPTURE ) ; 

if (milntent .resolveActivity(getPackageManager ()) != nuil) { 

startActivityForResult (milntent, REQUESTCODE_CAPTURA_DE_IMAGEN) ; 

} 

Si hubiera más de una aplicación de cámara instalada en nuestro dispositivo, Android dará a elegir al usuario. A 
nosotros como desarrolladores nos da igual que aplicación haga la foto, solo queremos la foto. Lo que sí nos 
interesa es saber que haya al menos una aplicación que pueda hacer fotos. En el anterior pedazo de código, el 
“if” comprueba que al menos una Activity externa pueda utilizar nuestro Intent, que pueda hacer fotos. 

Ya se ha abierto la otra aplicación, no tenemos su control de nada que pase en ella. Nos toca esperar a que 
termine y volvamos a nuestra Activity. 

El método onActivityforResultsO será llamado al volver a nuestra Activity siempre que ya existiera previamente 
(se llamará antes que a onResume()); dicho de otra manera, se llamará al volver de otra aplicación que no es la 
nuestra. Además devuelve una serie de parámetros: 

O requestCode (código de respuesta): un código que definimos nosotros, para informarnos a nosotros 
mismos dentro startActivityforResultsQ que es lo que se ha hecho. Por si la Activity de terceros pudiera 
hacer varias cosas, diferenciar cual se ha hecho. 

O resuitCode (código de solicitud): este código es importante, ya que nos informa de varios sucesos. 
Aunque aquí voy a explicar todos, en la mayoría de los casos bastará con comprobar el primero: 

o Activity.RESULT_OK: si se ha realizado todo correctamente 

o Activity.RESULT_CANCELED: si la Activity de terceros no devuelve ningún resultado o se fallado 
mientras realizaba la operación 

o Activity.RESULT_FIRST_USER: Si se vuelve con resultados definidos por el usuario 
O Intent: Intent que nos devuelve la Activity que externa a nuestra Activity 
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El siguiente código muestra un ejemplo de cómo implementar el método onActivityResult(). Utilizaremos el 
parámetro resuitCode para comprobar si todo ha ido bien (si es RESULT_OK). Luego diferenciaremos con un 
switch que requestCode le está llegando (el que hemos pasado nosotros antes en el startActivityForResultQ ) 
para hacer una cosa u otra dependiendo de qué nos llegue. Ya nos queda utilizar el Intent con los datos que nos 
han pasado, para la foto vendrá en un Extra con la clave “data” (esto lo sabemos por la documentación). 

@Override 

protected void onActivityResult (int requestCode, int resuitCode, Intent intent) { 

if (resuitCode == Activity .RESULT_OK) { 
switch (requestCode) { 

case REQUESTCODE_CAPTURA_DE_IMAGEN : { 

Bundle extras = datos .getExtras(); 

Bitmap imagenBitmap = (Bitmap) extras .get( "data" ); 

break ; 

} 


} 

super .onActivityResult(requestCode, resuitCode, intent); 

} 

También podremos utilizar getData() del Intent devuelto, si por ejemplo lo que nos devuelve es una Uri (esto de 
la Uri lo veremos en temas posteriores). Aunque también nos podrá devolver otros datos en los “extras”, para 
usarlos tendremos que ver en la documentación que nos está devolviendo. 

Si todavía te quedaran dudas o quieres practicar, tienes el ejemplo completo un poco más adelante. 


¿Por qué la Activity que arranca mi aplicación tiene un “action” y una “category” en el “Andro¡dManifest.xml”? 

Como hemos explicado anteriormente, para que otra aplicación nos lance la Activity principal. Antes de que 
elimines esta action y este category, al pensar en que “ninguna aplicación va a ejecutar mi Activity” o “no quiero 
que ninguna aplicación inicie mi Activity” has de saber el por qué está ahí eso. 

Siempre va a existir una aplicación que inicie tu aplicación, por tanto tu Activity, y esta es el escritorio de 
Android. Dicha aplicación se llama “HomeScreenLauncher” y viene instalado en todos los sistemas operativos 
de Android. Es la aplicación que suelen cambiar las casas que fabrican dispositivos para que se adecúen a su 
marca, o también la que suelen hacer varios desarrolladores para modificarla y que sea diferente (¿Quién no ha 
querido un escritorio de Android que sea igual a Windows 95? Es broma, ¿me sigues no?). 



Intent implícito con: 

• Action: MAIN 

• Category: LAUNCHER 

• Data: clave EXTRA_TITLE, con valor "Jarroba App' 


s P 



Lo que ocurre cuando pulsamos un icono del escritorio de la aplicación de “HomeScreenLauncher”, realmente 
estamos pulsando un <Button> sobre una Activity que se llama “ActivityHomeScreen”. Ejecuta el método 
startActivityForResult() al que le pasa un Intent implícito con un “Action” que contiene “MAIN” y una “Category” 
con “LAUNCHER”, además de un “extra” con la clave “EXTRA_TITLE” con el valor del nombre de la aplicación. De 
este modo Android sabe que Activity abrir y evidentemente coincidirá el “Action” y el “Category” con la única 
Activity de nuestra aplicación que tenga estos dos, por lo que será la que arranque la aplicación. Es decir, hace 
lo mismo que cualquier otro Intent implícito. De ahí que sea esta Activity “ActivityHomeScreen” la que inicia 
nuestra aplicación cuando pulsamos sobre un icono del escritorio de Android. 
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¿Cómo pasar un objeto completo como Extra de un Intent? 

Muy sencillo. Supongamos que queremos pasar un objeto como el siguiente, que he llamado 
“ObjetoComplejo.java”. Lo primero que hay que hacerle es que implemente de Serializable. Al implementar de 
Serializable tiene que tener una variable global llamada serialVersionUID que sea de tipo “long”. 


¿Cómo genero automáticamente el serialVersionUID de una implementación Serializable? 

Al implementar la clase de Serializable, Eclipse nos marcará de 5 p^nc dassi 

amarillo el nombre de la clase. Al poner el cursor encima nos * \ 

aparecerá la opción “Add generated serial versión ID” que nos 
creará automáticamente una serial. Nos aparecerá una variable 
como la siguiente: 

private static final long serialVersionUID = 4033861841342628493L; 

Obj etoComplej implements Serializable { 

The serializable class ObjetoComplejo does not declare a 

3 quickfixes available: 

1+ Add aenerated serial versión ídI 
(5! Add ©SuppressWarninas 'serial' to 'ObietoCompleio' 


Ya solo nos queda crear nuestro objeto de la manera normal que hemos hecho siempre en Java. En el siguiente 
código pongo un ejemplo de que tenga dentro un String, un List de objetos y un objeto (reutilizo ObjetoComplejo 
para el ejemplo, podría ser cualquier otro objeto). Lo dicho, será un objeto normal con sus variables y métodos. 


public class ObjetoComplejo implements Serializable { 

private static final long serialVersionUID = 4033861841342628493L; 

public String unDatoDeTexto = "" ; 

public List<ObjetoComplejo> unaLista = new ArrayList<ObjetoComplejo>(); 

public ObjetoComplejo oc = new ObjetoComplejo(); 

} 

Ahora bien, para enviar y recibir este objeto entre Activities: 

O Enviar datos: Tengo mi objeto normal de Java que quiero pasar, que podré hacer con él lo que quiera 
antes y después. Simplemente lo pasamos al método putExtra() con una clave para reconocerlo y el 
objeto que quiera (por sobrecarga de métodos, el objeto que implementa de Serializable entrará en el 
método putExtra()). 

public final static String CLAVE_EXTRA_PASAR = "claveDelDatoAPasarALaOtraActivity" ; 

Intent intención = new Intent(getApplicationContext (), ActivityQueQuieroIniciar. class) ; 

ObjComplejo miObjetoPasar = new ObjetoComplejo(); 

intención .putExtra( CLAVE_EXTRA_PASAR , miObj Pasar) ; 

startActivity (intención) ; 

O Recibir datos: Para recibirlo simplemente obtendremos con getSerializable() y le haremos un cast 

(convertir un objeto de un tipo en el tipo de objeto que nosotros queramos). Ya podremos utilizarlo en la 
otra Activity. 

Bundle bundle = getlntent() .getExtras(); 

ObjetoComplejo miObjRecibir = (ObjetoComplejo) bundle .getSerializable(LaAnteriorActivity. CLAVE_EXTRA_PASAR) ; 


Referencias: 

O http://developer.android.com/guide/components/intents-filters.html 

O http://developer.android.com/reference/android/content/lntent.html 

O http://developer.android.com/training/basics/intents/result.html 

O http://developer.android.com/guide/topics/appwidgets/host.html 
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Ejemplo de ir desde una Activity a otra dentro de la misma aplicación 


Lo que haremos 

Lo que escribamos en un cuadro editable (EditText) será pasado a una nueva Activity cuando pulsemos un botón 
(Como recordatorio: al crear otra Activity nos tenemos que acordar de declararla en el “AndroidManifest.xml”). 

Para hacer este ejemplo utilizaremos un Intent explícito. 



activity primera 

Paso el texto www.Jarroba.conj 
Iniciar una nueva Activity 


DeUnaActivityAOtra 


Ilustración 20 - Activity Primera donde escribiremos lo que queremos pasar a la nueva Activity y pulsaremos el botón para iniciar la nueve 

Activity 



Ilustración 21 - Cuando se inicie la Activity Segunda recogerá el valor pasado y lo mostrará 
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Proyecto 


>a í¿3 DeUnaActivityAOtra 
A src 

comjarroba^deunaactivitva otra 
> |S^rimeraActívítyJav^| 

0 1[7] SegundaActivity.java | 
t> 'í¿$ ge^SeñerateTJav^ües^ - 
> sk Android 4.4W 
EA Android Prívate Libraries 
¡¿ 3 ? assets 
t> ¡¿3- bin 
l> ^ libs 
a í¿3> res 

> & drawable-hdpi 
£ 3 ? drawable-ldpi 

> £b drawable-mdpi 

> drawable-xhdpi 

> drawable-xxhdpi 

I O activ¡ty_primera.xml I 

[o¡ activity segunda.xml | 

> ^ values-vll 
> £3? values-v14 
> £> values-w820dp 
[íj .classpath 

% ¡cjauncher-web.png 
[§) proguard-project.txt 
1 project.properties 




www.Jarroba.com 


190 













res/layo ut/a cti vity_p r¡ mera.xm I 


<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 

android:background= "dandroid:color/holo_green_light" 
android:gravity= "center" 
android:orientation= "vertical" 
tools:context= ".PrimeraActivity" > 

<TextView 

android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:text= "ACTIVITY PRIMERA" 

android:textAppearance = "?android:attr/textAppearanceMedium" /> 
<EditText 

android:id = "@+id/editText$activity_primera$textoPasar" 

android:layout_width= "fill_parent" 

android:layout_height= "wrap_content" 

android:ems= "10" 

android:hint = "" 

android:text= "Texto a pasar a la otra Activity" > 

CrequestFocus /> 

</EditText> 

<Button 

android:id= "@+id/button$activity_primera$botonIniciarActivity" 
android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:text= "Iniciar una nueva Activity" /> 

</LinearLayout> 


res/layou1/act¡vity_segunda.xml 


<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 

android:background= "dandroid:color/holo_green_dark" 
android:gravity= "center" 
android:orientation= "vertical" 
tools:context= ".SegundaActivity" > 

CTextView 

android:layout_width= "wrap_content " 
android:layout_height= "wrap_content" 

android:text= "ACTIVITY SEGUNDA\n\nEl dato pasado es:" 
android:textAppearance= "?android:attr/textAppearanceMedium" /> 

<TextView 

android:id= "@+id/textView$activity_segunda$textoPasado" 

android:layout_width= "wrap_content" 

android:layout_height= "wrap_content" 

android:background= "dandroid:color/holo_red_light" 

android:text= "xxxx" 

android:textAppearance= "?android:attr/textAppearanceSmall" /> 

</ LinearLayout> 



191 


www.Jarroba.com 





Ejemplo de ir desde una Activity a otra fuera de nuestra aplicación y volver a la anterior 

Lo que haremos 

Nuestra Activity tendrá un botón que abrirá el Activity de una aplicación de cámara instalada en nuestro 
dispositivo (Activity externa), al hacer la foto volveremos a nuestra Activity y dibujaremos la foto en un 
ImageView. 

Nota: Las imágenes de este ejemplo están hechas con el emulador de Android. El emulador simula lo que ve la 
cámara con un fondo de cuadrados blancos y negros con un cuadrado encima que cambia de color (de ahí que 
en estas imágenes se vean cuadrados en vez de una foto real). Si lo probamos en un dispositivo real o con 
webcam, veremos una imagen real. 

No hará falta que declaremos nada en el “AndroidMainfest.xml”, puesto que se abre una Activity de otra 
aplicación (deberá estar declarada, por quien desarrollo la otra aplicación, en el “AndroidManifest.xml” de la 
otra aplicación). Por la misma razón, no harán falta declarar permisos de cámara, ya que nosotros utilizaremos 
la otra aplicación, donde deben estar declarados. Si fuésemos nosotros quienes desarrolláramos la aplicación 
de cámara, sí que tendríamos que declarar los permisos apropiados. 

Si hubiera más de una aplicación de cámara instalada en nuestro dispositivo, Android dará a elegir al usuario. A 
nosotros como desarrolladores nos da igual que aplicación haga la foto, solo queremos la foto. Lo que sí nos 
interesa es saber que haya al menos una aplicación que pueda hacer fotos. 

Para hacer este ejemplo utilizaremos un Intent implícito. 



Abrir Activity de Cámara, 


Imagen obtenida al volver de la 
Activity de la Cámara: 


DeUna Activity AOtraExtema 


Ilustración 22 - El usuario tiene un botón que lanza una aplicación de cámara (lanza un Activity de la aplicación de la cámara) 
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Ilustración 23 - Se abre la cámara, el usuario hace una foto. Entonces, la aplicación de la cámara se cierra y volvemos a nuestra aplicación 



Abrir Activity de Cámara 


Imagen obtenida al volver déla 
Activity de la Cámara. 


DeUnaActivityAOtraExtema 


Ilustración 24 - Al volver a nuestra aplicación, volveremso a la Activity que lanzó la cámara, por lo que entrará por su onActivityResult() con la 

foto. Teniendo la imagen solo nos queda dibujarla 
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Proyecto 


s Q 3 DeUnaActivityAOtra Extern a 
a 0 src 

a ^^omja^ba^deunaactivityaotraeíterna 
;^^^^ainActivi^ja^J 
t> ^3 gen [Generated Java File:] 

» ^ Android 4 . 4 W 
t> £ífc Androicl Prívate Librarles 
[^3, assets 
t> ¡fe bin 
t> ¡fe libs 
a fe res 

t > drawable-hdpi 

£> drawable-ldpi 
t> drawable-mdpi 

> £7 drawable-xhdpi 
t> drawable-xxhdpi 
j £3 ? layout 

> £7 valúes 

t> £7 va lúes- vil 

> £5? va lúes- vi 4 

> & values-wSZOdp 
[í] .classpath 

2] .project 

jd AndroidManifest.xml 
llbj icjauncher-web.png 
[j proguard-project.txt 
[¡] project.properties 


MainActivity.java 


public class MainActivity extends Activity { 
prívate ImageView imageViewFotograf ia; 

prívate static final int CODE_CAPTURA_DE_IMAGEN = 1; 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate (savedlnstanceState) ; 
setContentView(R.layout. activity_main ); 

imageViewFotografia = (ImageView) findViewByld(R.id. ±mageV±ew$act± vi ty_ma±n$ponerAqu±Foto) 
final Intent milntent = new Intent(MediaS tore. ACTION_IMAGE_CAPTURE) ; 


//Comprobamos que exista alguna Activity externa que pueda controlar esta petición 
if (milntent .resolveActivity(getPackageManager()) != nuil) { 

Button botonHacerFoto = (Button) findViewByld(R.id. button$acti vi ty_main$hacerFoto) 
botonHacerFoto .setOnClickListener (new OnClickListener() { 

@Override 

public void onClick(View v) { 

startActivityForResult (milntent , CODE_CAPTURA_DE_IMAGEN) ; 

} 


}) ; 


} 


} 


@Override 

protected void onActivityResult (int codigoDeSolicitud, int codigoDeResultado, Intent datos) { 
if (codigoDeResultado == Activity .RESULT_OK) { 
switch (codigoDeSolicitud) { 

case CODE_CAPTURA_DE_IMAGEN : { 

Bundle extras = datos .getExtras(); 

Bitmap imagenBitmap = (Bitmap) extras .get( "data" ); 
imageViewFotografia .setlmageBitmap (imagenBitmap) ; 

break ; 

} 


} 

super .onActivityResult (codigoDeSolicitud, codigoDeResultado, datos) ; 
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Navegación con Fragmente 

¿Qué tipos de Fragments hay? ¿Puedo cambiar cualquier tipo de Fragment desde Java? 

Existen dos tipos de Fragments: 

O Estático o final: se declara un fichero XML de la carpeta “layout” con las etiquetas <fragment>; donde se 
declara un atributo “android:name’\ con nombre del paquete seguido de la clase Java que herede de 
Fragment, la cual le da funcionalidad. Este Fragment lo instancia Android en el momento en que carga el 
diseño de la Activity que lo contiene. Este Fragment va siempre pegado al diseño de la Activity 
contenedora. Es importante recordar que un Fragment estático no podrá ser nunca eliminado o 
sustituido desde Java, de intentarlo nos dará error. Para cambiar este Fragment habrá que sustituir 
completamente a la Activity (y con ella se irá el Fragment estático). 

<fragment 

android:name= "com.jarroba.miApp.MiClaseQueHeredaDeFragment" 

android:layout_width= "match_parent" 
android:layout_height= "match_parent” /> 

O Dinámico: se declara e instancia desde código Java, y se asocia a un ViewGroup (Se recomienda el uso 
de FrameLayout). Éste sí que se podrá ser añadido, eliminado o sustituido desde Java por otro Fragment 
u otro contenido. 

MiClaseQueHeredaDeFragment miFragment = new MiClaseQueHeredaDeFragment(); 

getFragmentManager() .beginTransaction () 

. add (R. id. frameLayoutDondePonerElFragmentDinamico , miFragment) 

.commit(); 


¿Puedo visualizar en el editor gráfico de diseños cómo quedaría un ejemplo del Fragment? 

Claro que sí. Para facilitar la vida al desarrollador, como vimos podemos, podemos utilizar “toolsdayout” para 
cargar el diseño que queramos y ver cómo queda. 

<fragment 

android:name= "com.j arroba.miApp.MiClaseQueHeredaDeFragment" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 

tools : layout= ”@layout/layout_del_fragment_estatico" /> 

No puedo terminar la contestación de esta pregunta sin recordar que: esto es para desarrolladores, para el editor 
gráfico de diseños, el usuario nunca verá esto. Como recordatorio, para asociar un diseño a un Fragment se hace 
desde la clase que hereda de Fragment, en la parte del ciclo de vida del Fragment en onCreateView(). 


¿Cómo puedo añadir, modificar y eliminar Fragment dinámico? 

Muy fácil. Lo voy a explicar con detalle. Podrás ver que estos pasos se resumen rápido. Antes voy a poner los 
requisitos que necesitamos: 

1. Tener un diseño en una carpeta Layout XML con un ViewGroup como FrameLayout, para colocar el 
Fragment dinámico como: 

<FrameLayout 

andr oid:i d = "@+id/frameLayoutDondePonerElFragmentDinamico" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" /> 

2. Tener una clase Java que herede de Fragment como: 

public class MiClaseQueHeredaDeFragment extends Fragment { 

//Código de la clase. Como el contructor vacio, la asociación del diseño en el onCreateView(), etc 

} 
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Ahora los pasos para realizar cambios de un Fragment: 


3. Instanciar u obtener la instancia del Fragment (de una clase Java que herede de Fragment) 

MiClaseQueHeredaDeFragment miFragment = new MiClaseQueHeredaDeFragment(); 

4. Obtener FragmentManager (Interfaz para interactuar con un objeto de tipo Fragment en una Activity): 

a. Si vas a programar en Android 3.0 en adelante, importaremos “android.app”: 

FragmentManager fm = getFragmentManager(); 

b. Si vas a programar en versiones más antiguas a Android 3.0, importaremos 
“android.support.v4.app” (intenta evitar el uso de esta biblioteca, ya no tiene soporte. Y sobre 
todo no mezcles bibliotecas bajo ningún motivo, o tendrás errores): 

FragmentManager fm = getSupportFragmentManager(); 

5. Obtener FragmentTransaction (Las transacciones de Fragments funcionan como si fueran una lista de 
acciones que hay que ejecutar en algún momento. Esto es, vamos poniendo todo lo que queremos que 
haga un Fragment al hacer la transición, como cambiar un Fragment por otro, añadir animaciones, que 
se guarde la pila de Fragments, etc; y cuando estemos contentos con lo que tiene que hacer 
ejecutaremos todo junto con commit()): 

FragmentTransaction ft = fm.beginTransaction(); 

6. Apilar las transiciones. Cada vez que llamemos a algún método de estos, se apilará y ejecutará en orden 
de llamada a cada método cuando hagamos commit(). Ninguno de estos métodos se ejecuta en el 
instante de llamarse, solo cuando se llama al método commit(). Algunos que podremos usar son: 

a. Añadir un Fragment dinámico con interfaz gráfica a un ViewGroup. 

.add(R.id. frameLayoutDondePonerElFragmentDinamico, miFragment) ; 

b. Eliminar un Fragment dinámico existente de un ViewGroup. 

f t. remove (miFragment) ; 

c. Remplazar realmente lo que hace es eliminar y después añadir (ejecuta los dos métodos 
anteriores). Si no existiera un Fragment anterior no pasa nada, simplemente lo añade. 

ft.replace(R.id. frameLayoutDondePonerElFragmentDlnamico, miFragment) ; 

d. Añadir un Fragment dinámico sin interfaz gráfica. Puede interesarnos hacer un Fragment que no 
tenga nada que ver el usuario, como lógica oculta. Es muy interesante para realizar operaciones 
ocultas al usuario y reutilizar el código de una manera muy sencilla. Es importante añadir un tag 
para poder identificar al Fragment desde otra parte de nuestro código; pues no se puede obtener 
del diseño, ya que no está asociado a ninguno, es solo lógica. 

ft.Jdd (miFragment, "Nombre del tag"); 

e. Guardar estado actual en la pila de atrás. Con esto al pulsar el botón de “atrás” del dispositivo, 
des-apilaremos antes el Fragment que a la Activity contenedora, mostrando el Fragment anterior 
al commit. 

ft.addToBackStack ("Nombre opcional para este estado de la pila de atrás") ; 

f. Animar la transición con varios efectos que podemos encontrar dentro de la clase 
FragmentTransaction. 

ft. setTransition (FragmentTransaction. TRANSIT_FRAGMENT_FADE) ; 

7. Flacer un commit para que los cambios de las transiciones surtan efecto (guiño a Git): 

ft - BBBKfvOB 

Todos los pasos anteriores están muy bien para aprender. Cuando tengas un poco de práctica, y gracias a que 
todos los métodos de FragmentTransaction devuelven el mismo objeto FragmentTransaction, podremos reducir 
el código anterior a algo tan elegante como: 

getFragmentManager().beginTransaction() 

.replace (R. id. frameLayoutDondePonerElFragmentDinamico, miElegido) 

.setTransition(FragmentTransaction. TRANSI T_FRAGMENT_FADE) 

. addToBackStack ( "Nombre opcional para este estado de la pila de atrás") 

.commit(); 
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Referencias: 


O http://developer.android.com/guide/components/fragments.html 
O http://developer.android.com/reference/android/app/FragmentManager.html 

O http://developer.android.com/reference/android/app/FragmentTransaction.html 
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Ejemplo de cambiar de un Fragment a otro en diferentes dispositivos 


Lo que haremos 

Tendremos una aplicación con un Fragment estático en la parte superior. Este Fragment estático tendrá un 
botón para permutar entre dos Fragments dinámicos que quedarán ubicados justo debajo del estático. Es decir, 
al cargar la aplicación aparecerá el Fragment dinámico A; luego, cada vez que se pulse el botón si se veía el 
Fragment dinámico A pondremos el B, y viceversa. 




Fragment Estático 


Cambiar de Fragment Dinámico 


Fragment Dinámico B 


DeUnFragmentoAOtro 



Ilustración 25 - Cada vez que pulsemos el botón del Fragment estático > cambiaremos entre el Fragment dinámico Ay B 
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Proyecto 


a 0 DeUnFragmentoAOtro 
a Q 3 src 

d 0 com.jarroba.deunfragmentoaot ro 
J] DinamicoFragmentA.java 

> [ 7 ] DinamicoFragmentB.java 
t> [T] EstaticoFragment.java 

> [ 7 ] MainActivity.java 

> geruGeneratecHav^iIes^^ 

> sft Android 4.4W 

> E& Android Prívate Librarles 

assets 

> ¡¿ 3 ? bin 
t> ¡c> libs 
d §5 res 

> & drawable-hdpi 
& drawable-ldpi 

> drawable-mdpi 
t> & drawable-xhdpi 

> ^ drawable-xxhdpi 

d la^ou^^ 
iGj activity main.xml 

[a fragment_dinamico_a.xml 
a fragment_dinamico_b.xml 
a fragment_estatico.xml 

> menú 

> & valúes 

> £> values-vll 

> values-v14 

> values-w820dp 
.classpath 

® .project 

[a] AndroidManifestxml 
IB icjauncher-web.png 
[j] proguard-project.txt 
[=| project.properties 
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QOverride 

public View onCreateView(Layoutlnflater inflater, ViewGroup container, Bundle savedlnstanceState) { 

View rootView = inflater.Ínflate(R.layout. fragment_estatico, container, false); 

Button boton = (Button) rootView.findViewByld(R.id. button$fragment_estatico$cambiarFragmentsDinamicos ) ; 

boton.setOnClickListener (new OnClickListener() { 

@Override 

public void onClick(View v) { 

mListener .onClickCambiarFragmentDinamico(); 


}) ; 

return rootView; 


@Override 

public void onAttach(Activity activity) { 
super .onAttach(activity); 


interfaz 


try { 

mListener = (OnMiClickListener) activity; 

} catch (ClassCastException e) { 

throw new IllegalStateException( "La clase " + activity.toString() + " debe implementar de la 
+ OnMiClickListener. class .getName() + " del Fragment al gue guiere escuchar") ; 

} 


@Override 

public void onDetach() { 

super .onDetach(); 
mListener = mListnerVacio ; 


} 


MainActivity.java 


public class MainActivity extends Activity implements OnMiClickListener { 

private boolean mPermutador = true; 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. activity_main ) ; 

DinamicoFragmentA fragmentDinA = new DinamicoFragmentA(); 
getFragmentManager().beginTransaction() 

.add(R.id. frameLayout$activity_main$contenedorFragmentsDinamicos , fragmentDinA) 
.commit(); 

} 


QOverride 

public void onClickCambiarFragmentDinamico() { 

Fragment fragmentElegido = nuil; 


if (mPermutador) { 

fragmentElegido = new DinamicoFragmentB(); 

} else { 




} 


getFragmentManager().beginTransaction() 

.replace(R.id. frameLayout$activity_main$contenedorFragmentsDinamicos f fragmentElegido) 
.commit(); 

mPermutador = ¡mPermutador; 


res/layou1/act¡vity_ma ¡ n .xml 


CLinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:baselineAligned= "false" 

android:divider= "?android:attr/dividerHorizontal" 
android:orientation= "vertical" 
android:showDividers= "middle" 

tools:context= "com.jarroba.deunfragmentoaotro.MainActivity" > 
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<fragment 

android:id= " @+id/fragment$activity_main$fragmentEstatico" 
android:name= "com.j arroba.deunfragmentoaotro.EstaticoFragment" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:layout_weight= "3" 

tools:layout= "Qlayout/fragment_estatico" /> 

<FrameLayout 

android:id= "@+id/frameLayout$activity_main$contenedorFragmentsDinamicos 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:layout_weight= "1" /> 

</LinearLayout> 





www.Jarroba.com 


202 





Ejemplo de cambiar de un Fragment a otro en diferentes dispositivos 


Lo que haremos 

Queremos una aplicación con dos botones. Al pulsar cada botón cargará un contenido diferente de manera 
dinámica (un Fragment diferente para cada contenido). Además, será una aplicación para diferentes 
dispositivos, por lo que dependiendo de dónde se ejecute deberá de verse y comportarse: 


Ejecutamos 

nuestra 

aplicación 


r ¿Cuál es el tamaño 
de la pantalla 
donde se ejecuta? 


' Por el tamaño de la 
pantalla Android los 
ficheros de diseño (layout) 
~I de la carpeta adecuada 


/Según la carpeta layout elegida^ /El usuario verá el diseño para^ 


el contenido de cada fichero será 
diferente, por lo que se cargará 
el diseño adecuado a cada caso 


cada caso dependiendo del 
dispositivo utilizado 



O En tamaño Tablet o superior: aparecerán los botones a la izquierda y el Fragment con el contenido a la 
derecha. Además, se animará la entrada de cada Fragment con un leve difuminado. Como hicimos en el 
anterior ejemplo, al arrancar por primera vez la aplicación cargaremos un Fragment para que el usuario 
no tenga ni que molestarse en pulsar la primera vez ningún botón. 

O En el resto de dispositivos más pequeños (las imágenes de aquí veremos un Smarthpone): En una 
Activity se mostrarán los botones. Debido al poco espacio en la pantalla, en otro Activity se mostrará el 
Fragment con el contenido elegido en cada uno de los botones. 



Fragment Estático 


Cargar Fragment Dinámico A 


Fragment Dinámico A 


Cargar Fragment Dinámico B 


DeUnFragmentAOtroDifConfig 


Fragment Estático 


Cargar Fragment Dinámico 


Fragment Dinámico 1 


Cargar Fragment Dinámico 


DeUnFragmentAOtroDifConfig 


Ilustración 26 - En Tablets, al ¡nielar la aplicación carga por defecto el Fragment A. Pulsamos para cargar el Fragment B. 


Se carga el Fragment B. Si pulsamos de nuevo en Fragment A, se eliminará el Fragment B y se volverá a cargar el Fragment A. 
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Ilustración 27 - SI ejecutamos la aplicación en un Smartphone, solo se cargará la Actlvlty con los dos botones, por falta de espacio. Pulsando 

uno se cargará una nueva Actlvlty con el Fragment correspondiente 



Ilustración 28 - Una vez cargada pulsaremos el botón de Atrás del dispositivo. Y volveremos a los dos botnes donde podremos elegir el otro 

Fragment 
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Proyecto 


a 0 DeUnFragmentAOtroDifConfig 
d src 

d £ com.jarraba.deunfraqmentaotrodiferentesconfiquraciones 
mamicoFragmentAjav^^^l 
I> [7] DinamicoFragmentB.java 
> [7] EstaticoFragment.java 
[> [7] MainActivity.java 

T| PantallasEstrechasActivity.java 

> 2£ ge^Séñéfáté^ávTRlés^^^^^^ - 

■A Android 4.4W 
[> Android Prívate Libraries 
2i> assets 
[> 2b bin 
[> 2b libs 


á fe res 

l> fe drawable-hdpi 
fe drawable-ldpi 
t> fe drawable-mdpi 

> fe drawable-xhdpi 

> fe drawable-xxhdpi 

d fe_l,^out_ 


-i 0 


activity_ma in jcm I 
activity_pantallas_estrechas.xml 
fragment_dinamico_a.xml 
E¡ fragment_dinamico_b.xml 
fragment_estatico.xml 


|^^ct!vit^mam!xm^ 

> fe menú 

> fe valúes 

> fe values-vll 

> fe values-v14 

> fe values-w820dp 
2 .dasspath 

[j?| .project 

fe ¡cjauncher-web.png 
2] proguard-project.txt 
2] project.properties 




Reutilizamos del anterior ejemplo: 
O DinamicoFragmentA 
O DinamicoFragmentB 
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QOverride 

public void onAttach(Activity activity) { 
super .onAttach(activity); 


interfaz 


try { 

mListener = (OnMiClickListener) activity; 

} catch (ClassCastException e) { 

throw new IllegalStateException( "La clase " + activity .toString() 
+ OnMiClickListener. class .getName() + " del Fragment al gue guiere escuchar") ; 

} 


debe implementar de la 


@Override 

public void onDetach() { 

super .onDetach(); 
mListener = mListnerVacio ; 


MainActivity.java 


public class MainActivity extends Activity implements OnMiClickListener { 

private boolean mDosFragmentos = false; 

QOverride 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView(R.layout. activity_main ) ; 

View frameLayoutContenedor = findViewByld(R.id. frameLayout$activlty_main$contenedorFragmentsDinamicos) ; 

mDosFragmentos = frameLayoutContenedor != nuil && frameLayoutContenedor.getVisibility() == View .VISIBLE; 
if (mDosFragmentos) { 

this .onClickCambiarFragmentDinamico(EstaticoFragment. FLAG_FRAGMENT_A ) ; 

} 


@Override 

public void onClickCambiarFragmentDinamico (int flagFragment) { 

if (mDosFragmentos) { 

Fragment fragmentElegido = nuil; 
switch (flagFragment) { 

case EstaticoFragment. FLAG_FRAGMENT_A: { 

fragmentElegido = new DinamicoFragmentA(); 
break; 

} 

case EstaticoFragment. FLAG_FRAGMENT_B : { 

fragmentElegido = new DinamicoFragmentB(); 

break; 


getFragmentManager().beginTransaction() 

.replace(R.id. frameLayout$activity_main$contenedorFragmentsDinamicos f fragmentElegido) 
.setTransition(FragmentTransaction. TRANSI T_FRAGMENT_FADE) 

.commit(); 

} else { 

Intent intent = new Intento ; 

intent.setClass (this, PantallasEstrechasActivity. class) ; 

intent.putExtra(PantallasEstrechasActivity. KEY_FLAG_FRAGMENT_ENVIADO, flagFragment ); 
startActivity(intent); 
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Reutilizamos del anterior ejemplo el código de: 

O res/layout/fragment_dinam¡co_a.xml 
O res/layout/fragment_dinamico_b.xml 
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android:layout_height= "wrap_content" 
android:text= "Fragment Estático" 

android:textAppearance= ”?android:attr/textAppearanceLarge" /> 
<Button 

android:id= "@+id/button$fragment_estatico$cargarFragmentDinamicoA" 
android:layout_width= "fill_parent" 
android:layout_height= "wrap_content" 
android:layout_weight= "1" 

android:text= "Cargar Fragment Dinámico A" /> 

<Button 

android:id= "@+id/button$fragment_estatico$cargarFragmentDinamicoB" 
android:layout_width= " fill_parent" 
android:layout_height= "wrap_content" 
android:layout_weight= ”1" 

android:text= "Cargar Fragment Dinámico B" /> 

</LinearLayout> 


res/layout-w 820 dp/act¡vity_main.xml 


<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tools" 
android:layout_width= "match_parent " 
android:layout_height= "match_parent" 
android:baselineAligned= "false" 

android:divider= "?android:attr/dividerHorizontal" 
android:orientation= "horizontal" 
android:showDividers= "middle" 

tools:context= "com.jarroba.deunfragmentaotrodiferentesconfiguraciones.MainActivity" > 

<fragment 

android:id= "8+id/fragment$activity_main$fragmentEstatico" 

android:name= "com.j arroba.deunfragmentaotrodiferentesconfiguraciones.EstaticoFragment" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:layout_weight= "2" 

tools:layout= "Qlayout/fragment_estatico" /> 

<FrameLayout 

android:id= "@+id/frameLayout$activity_main$contenedorFragmentsDinámicos" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent” 
android:layout_weight= "1" /> 

< /LinearLayout> 


AndroidManifest.xml 


<?xml versión ="1.0" encodinq="utf-8"?> 

Cmanifest xmlns:android= "http://schemas.android.com/apk/res/android" 
package= "com.j arroba.deunfragmentaotrodiferentesconfiguraciones" 
android:versionCode= "1" 
android:versionNam e="1.0" > 

<uses-sdk 

android:minSdkVersion= "16" 
android:targetSdkVersion= "21" /> 

<application 

android:allowBackup= "true" 
android:icon= "@drawable/ic_launcher” 
android:label= "@string/app_name" 
android:theme = "@style/AppTheme" > 

<activity 

android:name = ".MainActivity" 
android:label= "@string/app_name" > 

<intent-filter> 

<action android:name= "android.intent.action.MAIN" /> 
Ccategory android:name= "android. intent.category.LAUNCHER" /> 
</ intent-filter> 

</ activity> 

<activity android:name= "PantallasEstrechasActivity">< / activity> 

</ application> 

</manifest> 
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Navegación hacia atrás y hacia arriba 


¿Navegar hacia atrás y hacia arriba? 

Si eres usuario de algún dispositivo con Android, tendrás en la cabeza como navegar 
hacia atrás: pulsando el botón de atrás. Botón que antiguamente solía ser físico y 
ahora siempre se encuentra en la parte inferior de la pantalla sobre fondo negro, 
Indicado el botón con una flecha de "atrás". 

Sin embargo, navegar hacia arriba te puede sonar un poco extraño. El botón de 
navegar hacia arriba se ubica en la parte superior de la pantalla, en el Interior del 
ActionBar (barra de acciones), a la izquierda con forma de "<" junto al icono (y a veces 
el nombre de la aplicación). 



<^i Books 


¿Qué diferencia hay entre pulsar el botón de atrás y el de arriba? 

O Back Button (Botón de atrás): Navega en orden opuesto 
al cronológico tanto dentro como fuera de la aplicación. 
También soporta cerrar ventanas de dialogo o popups, 
eliminar elementos seleccionados, cerrar el ActionBar 
contextual, u ocultar el teclado. Des-apila Activities de 
la pila de Activity. Puede hacer salir de la aplicación. 

O Up Button (Botón de arriba): Navega en base a la 
jerarquía de las relaciones entre Activities dentro de 
la aplicación. Apila Activities en la pila de Activity. 

Nunca hace sale de la aplicación. 

Veamos un ejemplo con la aplicación "Google Play" donde 
compramos y descargamos otras aplicaciones. 

Empezamos en el listado de libros y elegimos un libro. Nos 
abrirá la ficha del libro donde podremos hacer 3 cosas: 


1. 

2 . 

3. 


Pulsar "atrás": volverá al listado de libros 



ó 


Book 1 Title 


0 “ 


Book 2 Title 

AUTHOR 2 


Movie 1 Title 

GENRE 


USERS ALSO VIEWED 


USERS ALSO VIEWEO 


Mo^rntie^ 


Book 1 details 


Book 2 details 


Movie 1 details 


Pulsar "arriba": volverá al listado de libros 


Pulsar en un artículo sugerido. Podremos elegir entre: 
a. Un libro. En la ficha de libro podremos: 


Pulsar "atrás": volverá al libro anterior 


Pulsar "arriba": volverá al listado de libros 


b. 


Pulsar en un artículo sugerido (podremos seguir abriendo ramas, para simplificar lee el 
siguiente punto). 

Una película. En la ficha de película podremos: 
i. Pulsar "atrás": volverá al libro anterior 


Pulsar "arriba": volverá al listado de 


película: 


iii. Pulsar en un artículo sugerido (y así 
infinitamente) 

Esto es así, ya que la jerarquía de Actlvles para este caso es la 
de la Imagen de la derecha. Donde tenemos dos árboles, uno 
para los libros y otro para las películas. En cada listado al pulsar 
un elemento se abrirá el detalle del elemento apropiado. 


1 libro 1 H libro 2 


- 


B I 


ü 

a 

B B 


Ü3n 

anJB 

Activity Lista doLibros 


ActivityListadoVideos 




ActivityDetalleLibro | ActivityDetalleLibro ActlvItyDetalleVldeo | ActivityDetalleVideo 
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De este modo, si nos encontramos en el punto del 
ejemplo donde: desde el listado de libros hemos escogido 
un libro, y luego desde los artículos relacionados hemos 
elegido una película. Tendremos una pila de Activity como 
la que se muestra a la derecha de la imagen de al lado 
(cada Activity ya pasada es la que está más abajo, la que 
ve el usuario es la que está en la cima de la pila). 

Aquí si pulsamos el botón de atrás, la Activity con el 
detalle de la película se des-apilará. 

Pero si pulsamos el botón de arriba, siguiendo la jerarquía 
como vimos antes, se apilará la Activity del listado de 
películas. 

Por lo que dependiendo lo que pulsemos tendremos de 
resultado una pila de Activities u otra. 

Tendremos que tener cuidado a qué Activity volverá el 
usuarios cuando pulse un botón u otro. 



¿Cómo puedo programar el botón de arriba? 

Es bastante sencillo. 


Primero tenemos que declarar la estructura jerárquica. Esto se hace desde el AndroidManifestxml utilizando 
para cada hijo el atributo “android:parentActivityl\lame”. Con esto conseguiremos dos cosas: desde la Activity en 
la que estemos saber cuál es su padre para ir al adecuado y que Android nos añada automáticamente el botón 
de arriba sobre el ActionBar. 

Por ejemplo, si queremos diseñar la siguiente jerarquía de la derecha: 

Pondremos en nuestro AndroidManifestxml la siguiente estructura: 

<activity 

android:name=". Libros” > 

</activity> 



<activity 

android:name=". LibroA” 
android:parentActivityName= Libros" > 
</activity> 


<activity 

android:name=". LibroB" 

android:parentActivityName= Libros" > 

</activity> 

Ahora solo nos queda en Activity escuchar el evento de clicado sobre el botón de arriba, y con este abrir al padre 
adecuado. Para abrir al padre nos basta con tener un Intent ya formado con la clase del padre a abrir 
(Imaginemos que estamos en “LibroA” por ejemplo), por lo que es tan sencillo como llamar desde la Activity en 
la que estemos al método: 


Intent uplntent = getParentActivityIntent(); 

Ya tendremos al Intent con la clase del Activity padre que queremos abrir (en este ejemplo un Intent con 
“Libros”). 

Ya solo nos queda llamar a “startActivityQ” y pasarle el Intent, pero también tenemos que decirle que nos limpie 
la pila de atrás para no tener un sinfín de Activities guardadas (Es decir, con el ejemplo si estamos en “Libros” 
vamos a “LibroA” luego pulsamos el botón de arriba nos volvería a crear otra Activity “Libros” y no queremos 
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esto; sino que solo tengamos un único Activity “Libros”). Para hacer esto existen varios modos, aquí pondremos 
el siguiente ejemplo, donde añadiremos un flagal Intent que haga justo esto anterior, des-apile de la pila de 
atrás todas las Activities hasta que tengamos solo una de ese tipo. Se puede hacer como: 

uplntent . addFlags (Intent . FLAG_ACTIVITY_CLEAR_TOP ); 
stantActivity(upIntent); 
finishQ ; 

Por fortuna Android nos facilita la vida con un método simple que está en Activity para hacer lo anterior, por lo 
que podemos utilizar (Nota: por la información existente y por las pruebas, este método parece tener un bug o 
un cambio de comportamiento no reportado, no cumple con la teoría del botón de arriba en todos los casos): 

navigateUpTo(upIntent); 

Ahora solo queda introducir todo este código en el evento que escuche. Este evento es el correspondiente con el 
menú de opciones, sobrescribiendo el método “onOptionsltemSelected()”. Dentro de este método nos llega un 
Menulntent que nos dirá el elemento que se ha seleccionado sobre la barra de tareas. Para escuchar solo al 
botón de atrás será el Menultem coincidente con el id “android.R.id.home”. Un switch nos facilitará mucho: 

@Override 

public boolean onOptionsItemSelected(MenuItem Ítem) { 

switch (item.getltemldQ) { 

case android.R.id. home: 

Intent uplntent = getParentActivitylntent(); 
navigateUpTo( uplntent ); 

return true; 


i 


return super .onOptionsItemSelected(ítem); 


¿Existen casos donde el botón de arriba se comporta igual que el de atrás? 

Sí, en los casos donde coincida el orden cronológico y el de jerarquía. 


¿Puedo ir a otra aplicación al pulsar el botón de arriba? ¿Qué es una tarea? 

Taslt A 

Hay unos casos especiales donde pulsando el botón de 
arriba nos moveríamos a otra aplicación. Entonces 
puedes preguntar: ¿No hemos dicho que el botón de 
arriba no puede salir de la aplicación? Es un caso 
peculiar, pues no salimos de la jerarquía por lo tanto 
no salimos de la aplicación pero si cambiamos de tarea 
(task). 


5'' ” o 


Aquí entra el concepto de Tarea (Task): Secuencia de 
Activities que un usuario sigue para conseguir su 
objetivo. Pueden ser tanto Activities de la misma App o de otras 
Apps de terceros. 

Explico con un ejemplo. Supongamos que abrimos una aplicación 
cualquiera (como "Google play"). Esta aplicación se abrirá sobre una 
tarea (Task A). Navegamos por la aplicación y en cierto momento 
pulsamos el botón de compartir. Aquí elegimos que queremos 
compartir por correo electrónico (como "Gmail"). Esto nos abrirá 
una Activity para redactar el correo de la aplicación de correo, que 
estará en la misma tarea que la primera aplicación -esto es así 
porque el usuario quiere seguir usando la primera aplicación y siente 


Book 1 Title 

AUTHOR 1 


Play Store home 


Ta§k B 
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como que la Activity de redactar el correo está dentro de la misma primera aplicación. Si pulsamos en enviar el 
correo se enviará y cerrará la Activity del correo; por lo que será lo mismo que pulsar atrás, volveremos a la Activitiy 
anterior. Sin embargo, si pulsamos el botón de arriba, por jerarquía de Activities llegaremos al listado de correos -a la 
bandeja de entrada del correo- y a partir de aquí ya estaremos en otra tarea (Task B) diferente -ya que el deseo del 
usuario ya no es estar en la primera aplicación, sino en otra diferente que es la de correo. De este modo la primera 
tarea se pone en segundo plano y la nueva tarea pasará a estar en primer plano. 


Si otras aplicaciones pueden usar una de mis Activities ¿Cómo puedo diferenciar si estoy en la tarea de mi 
aplicación o en otra de terceros? 

En caso de que nuestra Activity se pueda abrir desde una aplicación externa, será importante diferenciar si estamos 
en la misma tarea o en otra. Para ello utilizaremos el método shouldUpRecreateTask() que nos dirá si estamos en 
otra tarea si es "true", si "false" estaremos en nuestra aplicación. Luego solo queda sincronizar la pila de atrás con 
TaskStackBuilder añadiendo la Activity a la pila de atrás e indicar que queremos navegar hacia arriba. 

if (shouldUpRecneateTask(upIntent)) { 

TaskStackBuilder.create (this) 

.addNextlntentWithParentStack(upIntent) 

.startActivities(); 

} else { 

navigateUpTo(upIntent); 

} 

¿Es siempre necesario poner el botón de arriba en todas las aplicaciones? 

Siempre que haga falta, ya que una aplicación no tiene un lugar principal por donde iniciarse, deberemos guiar 
al usuario desde donde esté. Por ejemplo como vimos antes, si desde otra aplicación pulsamos en compartir y 
redactar correo, se nos abrirá la aplicación de correo pero desde la Activity de redacción, no desde la del listado 
de correos; para llegar a esta última pulsaremos el botón de arriba. 


¿Modificar una View en una Activity, modifica el comportamiento de los botones arriba o atrás? 

No cambia el comportamiento de los botones Atrás o Arriba. Por ejemplo: hacer switch entre tabs, filtrar una 
lista, usar zoom, etc. 


¿Cuál es el comportamiento con varios puntos de entrada a la aplicación? 

Algunas Activities no tienen un camino fijo por el que llegar, pudiendo acceder desde diferentes lugares. El botón 
de arriba, en este caso se comportaría igual que el de atrás. Ejemplo: una pantalla de opciones. 


¿Y el comportamiento del botón de Home? 

Pulsar el Home Button (Botón de salida al Escritorio) provoca la salida completa 
al "HomeScreenLauncher". 



La tarea completa (en la imagen de ejemplo Task A), por tanto, 
también su pila de atrás, se ponen en segundo plano, por lo que 
pierde el foco. Entonces el usuario puede arrancar una nueva tarea 
(en la imagen Task B) que se pondrá en primer plano. La tarea queda 
en segundo plano, pero su pila de atrás guarda el estado. Así, de 
volver a ser seleccionada por el usuario, recuperará al estado en que 
quedó previamente. Cabe notar que el sistema puede destruir las 


Foregíound activity 


Activity Z 


Activity Y 



Activity Y 


Activity X 


Task B 


Background 


Task A 
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tareas en segundo plano si necesitara los recursos. Por si fuera destruida la Activity, es importante salvar su 
estado con onSavelnstanceStateQ 


¿Puedo arrancar una Activity varias veces? 

Es posible crear nuevas instancias de la misma Activity varias veces (desde la 
misma tarea u otra diferente), por lo que en la pila de atrás se comportarían como 
si fueran Activities diferentes. 


Referencias: 

O http://developer.android.com/guide/topics/ui/actionbar.html 

O http://developer.android.com/design/patterns/navigation.html 
O http://developer.android.com/training/implementing-navigation/ancestral.html 

O http://developer.android.com/reference/android/support/v4/app/NavUtils.html 

O http://developer.android.com/training/design-navigation/ancestral-temporal.html 
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Ejemplo de navegar hacia atrás y hacia arriba 

Lo que haremos 

Simularemos que hacemos la aplicación de Google Play indicada anteriormente. Queremos que exista un listado 
de libros y otro de vídeos. Podríamos poner un menú de selección de listados, por simplificar, iniciaremos la 
aplicación sobre el listado de libros directamente. También, por simplificar, haremos los dos listados con 
botones (más adelante haremos los listados con ListView que es como hay que hacerlos en Android). 
Evidentemente, al pulsar sobre un elemento del listado se nos abrirá el detalle de dicho elemento (si es un libro 
su descripción, título, autor, etc; y si es un vídeo su sinopsis, actores, etc). Otra vez simplificaremos poniendo los 
datos del detalle a pelo en una Activity aparte (cuando veamos listados veremos que añadir el detalle será 
dinámico). De este modo nos quedará la siguiente estructura de la aplicación (es igual que la que vimos 
previamente en la pregunta “¿Qué diferencia hay entre pulsar el botón de atrás y el de arriba?’’): 



Este ejemplo está diseñado para que te hagas a la ¡dea de la estructura de listado, tampoco queremos 
meternos en profundidad con los listados todavía, así que simplificaremos más haciendo solo el LibroA y el 
VideoA para el ejemplo. 

No tenemos que olvidar colocar a cada libro y a cada vídeo el botón de arriba. 

También añadiremos a cada libro y cada vídeo una parte de productos recomendados (lo haremos en un 
Fragment estático para poder reutilizarlo en varios sitios) 



Ilustración 29 - Probaremos primero dirigiéndonos a un detalle de un libro y pulsaremos el botón de arriba. Hará lo mismo que pulsar el botón 
de atrás, con la diferencia Interna que ha vuelto por el nivel de jerarquía no de historial 
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JBRO A 

Descripción y datos del libro 


LIBROS 


Libro A 


Productos recomei 


Libro A 


Video A 


NavegarHaciaArriba 


NavegarHaciaArriba 


NavegarHaciaArriba 



Ilustración 30 - Otro ejemplo de pulsar arriba es si ahora estando en el detalle del libro pulsamos en un vídeo recomendado. En el detalle del 
vídeo pulsaremos el botón de arriba, en este caso sí que el usuario ha notado la diferencia, hemos vuelto por la jerarquía hasta el listado de 

vídeos, no el de libros 



VIDEO A 

Sinopsis y datos del video 


Productos recomendados 


Video A 


< NavegarHaciaArriba 


Ilustración 31 - Solo nos queda el caso del botón de atrás. Si estamos en cualquier detalle y pulsamos atrás volveremos por el historial. Como 
podemos comprobar , hace lo mismo que el primer caso aquí mostrado > pero des-apilando una Activity de la pila de atrás, no volviendo por la 

jerarquía 
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Proyecto 


a £5 NavegarHaciaArriba 
a src 

comjarrobajTaveqarhaciaarriba 

T^TragmeñtRecomeñdadosJav 


2| LibroA.java 
[7] Libros.java 
[7) VideoA.java 
[7] Videos.java 


2$ gen [Gener 

> Bi Android 5.0 

> Android Prívate Librarles 
2b assets 

> 2b bin 

> 2b übs 
^ 2b res 

> fe drawable-hdpi 
fe drawable-ldpi 

> fe drawable-mdpi 

> fe drawable-xhdpi 

> fe- drawable-xxhdpi 
j fe» layout 

[O libro_a.xml 
libros.xml 

recomendados.xml 
video_a.xml 
^^ideo5Arn^^^^^ 


0 fe menú 
t> fe valúes 
t> fe values-vll 
t> fe values-v14 
> fe values-w820dp 
2] .classpath 

f^AndroídMañífestxm^ 

T^ifeauncne^etTpn^^ 

13 proguard-project.txt 
3 project.properties 


FragmentRecomendados.java 


public class FragmentRecomendados extends Fnagment { 

@0vennide 

public View onCneateView(LayoutInflaten inflater, ViewGnoup container, Bundle savedlnstanceState) { 
View nootView = inflaten. inflate(R.layout. recomendados, container, false); 

Button bLibnoA = (Button) nootView. findViewById(R.id .button$Libros$LibroA ) ; 
bLibnoA. setOnClickListener (new OnClickl_istener() { 

@0vennide 

public void onClick(View v) { 

Intent intent = new Intent(getActivity(), LibroA. class) ; 
startActivity( intent); 

} 

}); 

Button bVideoA = (Button) nootView. findViewById(R.id .button$videos$videoA ) ; 
bVideoA. setOnClickListener (new OnClickl_istener() { 

@0verride 

public void onClick(View v) { 

Intent intent = new Intent(getActivity(), VideoA. class) ; 
stantActivity( intent); 

> 

}); 

return nootView; 

> 

> 


LibroAJava 


public class LibroA extends Activity { 

@0verride 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate( savedlnstanceState) ; 
setContentView(R.layout. Libro_a ) ; 

} 
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@Override 

public boolean onOptionsItemSelected(MenuItem Ítem) { 
switch (item.getltemld()) { 

case android.R.id .home: 

Intent uplntent = getParentActivitylntent() 

. aóóflags (Ir\ter\t. FLAG_ACTIVITY_CLEAR_TOP) ; 
startActivity(upIntent); 
finishQ; 

return true; 

> 

return super .onOptionsItemSelected( ítem) ; 

> 

> 


Libros.java 


public class Libros extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super. onCreate(savedInstanceSt ate ); 
setContentView(R.layout. Libros); 

Button blrLibroA = (Button) findViewById(R.id .button$Libros$Librol) ; 
blrLibroA. setOnClicl<Listener(new OnClickListener() { 

@Override 

public void onClick(View v) { 

Intent intent = new Intent(getApplicationContext(), LibroA. class) 
startActivity(intent); 

> 

}); 


} 


} 


VideoAJava 


public class VideoA extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate( savedlnstanceState) ; 
setContentView(R.layout. video_a) ; 

} 

@Override 

public boolean onOptionsItemSelected(MenuItem item) { 
switch (item.getltemld()) { 

case android.R.id .home: 

Intent uplntent = getParentActivitylntent() 

.addFlags(Intent. FLAG_ACTIVITY_CLEAR_TOP) ; 
startActivity(upIntent); 
finish(); 

return true; 

> 

return super. onOptionsItemSelected(item); 

} 

} 
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Videos.java 


public class Videos extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super.onCreate(savedlnstanceState) ; 
setContentView(R.layout. videos) ; 

Button blrVideoA = (Button) findViewById(R.id .button$videos$videoA) ; 
blrVideoA. setOnClicl<Listener(new OnClickListener() { 

@Override 

public void onClick(View v) { 

Intent intent = new Intent(getApplicationContext(), VideoA. class) ; 
startActivity(intent); 

> 

}); 


} 


res/layout/Nbro_a.xml 


< LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns:tools= "http://schemas.android.com/tooLs" 
android: id="@+id/container" 
android: layout_viidth="match_parent" 
android:layout_height= "match_parent" 
android:background= "@android:coLor/hoLo_biue_dark" 
android: gravity= "ce/iter" 
android:orientation= "verticaL" 

tools:context= " com.jarroba.navegarhaciaarriba.Libro_a" > 

<LinearLayout 

android:layout_width= "match_parent" 
android: layout_height= "\A/rap_content" 
android:layout_weight= "1" 
android:orientation= "verticaL" > 

<TextView 

android: layout_width= "iA/rap_content" 
android: layout_height= "iA/rap_content" 
ar\droid:text="@string/Libro_a" 

ar\droid:textAppearar\ce="?android:attr/textAppearanceLarge" /> 
<TextView 

android:layout_width ="wrap_content" 
android: layout_height= "iA/rap_content" 
ar\droid:text="@string/descripci_n_y_datos_deL_Libro_" 
ar\droid:textAppearance=" Pandroid:attr/textAppearanceMedium" /> 
</LinearLayout> 

<fragment 

android: id="@+id/fragment$Libro_a$fragmentRecomendados" 

android:name= "com.jarroba.navegarhaciaarriba.FragmentRecomendados" 

android:layout_width= "match_parent" 

android: layout_height= "\A/rap_content" 

android:layout_weight= "1" 

tools:layout= "@Layout/recomendados" /> 

</LinearLayout> 
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res/layoul/libros.xml 


<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns :tools=" http://schemas.android.com/tooLs" 
android: id="@+id/container" 
android:layout_width = "match_parent" 
android:layout_height= "match_parent" 
android:background= "@android:coLor/hoLo_bLue_Light" 
android:gravity= "center" 
android:orientation= "verticaL" 

tools:context= "com.jarroba.navegarhaciaarriba.Libros" > 

<TextView 

android:layout_width= "wrap_content" 
android: layout_height= "\A/rap_content" 
android :text=" LIBROS" 

android:textAppearar\ce=" Pandroid:attr/textAppearanceLarge" /> 
<Button 

android:id= "@+id/button$Libros$Librol" 
android:layout_width= "fi LL_parent” 
android: layout_height= "]A/rap_content" 
android:layout_weight= "1" 
android :text="Libro A” /> 

<Button 

android: id="(a)+id/button$Libros$Libro2 " 
android:layout_width= "fiLL_parent" 
android: layout_height= "wrap_cointent" 
android:layout_weight= ”1" 
android :text=”Libro B" /> 

</LinearLayout> 


res/layoul/recomendados.xml 


<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" 
xmlns :tools=" http://schemas.android.com/tooLs" 
android:id= "@+id/container" 
android:layout_width= "match_parent" 
android:layout_height= "match_parent" 
android:background= "@android:coLor/hoLo_purpLe" 
android:gravity= "center" 
android:orientation= "verticaL" 

tools:context= "com . jarroba . navegarhaciaarriba . FragmentRecomendados" > 
<TextView 

android:layout_width= "wrap_content" 
android: layout_height= "\A/rap_content" 
android:text= "Productos recomendados " 

ar\droid:textAppearance=" Pandroid:attr/textAppearanceLarge" /> 
<Button 

android: id="@+id/button$Libros$LibroA" 
android:layout_width= "fi LL_parent" 
android: layout_height= "\A/rap_content" 
android:layout_weight= "1" 
android:text= "Libro A" /> 

<Button 

android: id= "@+id/button$videos$videoA " 
android:layout_width= "fi LL_parent" 
android: layout_height= "\A/rap_content" 
android:layout_weight= "1" 
android:text= "Video A" /> 

</LinearLayout> 
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res/layout/video_a.xml 


cLinearLayout xmlns:android= "http://schemas.android.com/apk/res/android” 
xmlns:tools ="http://schemas.android.com/tooLs" 
android: id="@+id/ container" 
android: layout_width=”match_parent" 
android:layout_height= "match_parent" 
android:background= "@android:coior/hoio_orange_dark" 
android ¡gravity^'center" 
android: orientation="verticc?¿. " 

tools: context="com . jarroba.navegarhaciaarriba. video_a" > 

<LinearLayout 

android:layout_width= "match_parent" 
android: layout_height= "iA/rap_content" 
android:layout_weight="l " 
android:orientation= "verticaL" > 

cTextView 

android: layout_width= "iA/rap_content" 
android: layout_height= "iA/rap_content" 
and roid:text= "@string/v_deo_a" 

android :textAppearance=" Pandroid:attr/textAppearanceLarge" /> 
cTextView 

android:layout_width= "wrap_content" 
and roid:layout_height= "wrap_content" 
android:text="@string/sinopsis_y_datos_deL_v_deo_" 
android :textAppearance=" Pandroid:attr/textAppearanceMedium" /> 
</LinearLayout> 

<fragment 

android: id="@+id/fragment$Libro_b$fragmentRecoinendados " 

android:name= "com.jarroba.navegarhaciaarriba.FragmentRecomendados" 

android:layout_width= "match_parent" 

android: layout_height= "¡A/rap_content" 

android:layout_weight="l " 

tools: layout ="(a)Layout/recomendados " /> 

</LinearLayout> 


res/layout/videos.xm I 


cLinearLayout xmlns:android=" http://schemas . android . com/apk/res/android" 
xmlns:tools =" http://schemas.android.com/tooLs" 
android: id="@+id/container" 
android:layout_width= "match_parent” 
android:layout_height= "match_parent" 
android:background= ”@android:coLor/hoLo_orange_Light" 
android:gravity= "center" 
android:orientation= "verticaL" 

tools:context= "com.jarroba.navegarhaciaarriba.videos" > 
cTextView 

android:layout_width= "wrap_content" 
android:layout_height= "wrap_content" 
android:text= "VÍDEOS" 

ar\droid:text/\ppearance=" ?android:attr/textAppearanceLarge" /> 
cButton 

android: id="@+id/button$videos$videoA " 
android:layout_width= "fi LL_parent" 
android:layout_height= "wrap_content" 
android:layout_weight= "1" 
android:text= "Vídeo A" /> 

cButton 

android: id="(a)+id/button$videos$videoB " 
android:layout_width= "fiLL_parent" 
android: layout_height= "iA/rap_content" 
android:layout_weight= "1" 
android:text= "Vídeo B" /> 

c/LinearLayout> 
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AndroidManifest.xml 


<?xml version="1.0" encoding="i/t/-£"?> 

<manifest xmlns: anóroió=" http://schemas.android.com/apk/res/android" 
package= "com.jarroba.navegarhaciaarriba" 
android:versionCode= 1" 
android:versionName="1.0" > 

<uses-sdl< 

android:minSdkVersion= ’16" 
android:targetSdkVersion= "21" /> 

<application 

android:allowBackup= "true" 
android:icon= "@drawabLe/ic_Launcher" 
android:label= "@string/app_name" 
anóroid:theme="@styLe/AppTheme" > 

<activity 

android:name= Libros" 

android:label= "@string/app_name" > 

<intent-filter> 

<action android:name= "android.intent.action.MAIN" /> 

<category android :name=" android.intent.category.LAUNCHER" /> 
</intent-filter> 

</activity> 

<activity 

android:name= LibroA" 

android:parentActivityName = ".Libros" > 

</activity> 

<activity 

android:name= Videos" > 

</activity> 

<activity 

android:name=". VideoA" 

android:parentActivityName= Videos" > 

</activity> 

</application> 

</manifest> 
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An d ro i d M a n ifest .xm I 


Manifest 


¿Qué es? 

El Manifest representa la información esencial acerca de la App. Información que Android debe conocer antes 
de ejecutar el código de la App. 

Android es quien se encarga de instanciar los componentes básicos de la aplicación (Activity, Services, 
Broadcast Receiver y Content Provider). Quiere decir, que si por ejemplo tenemos una Activity como la siguiente: 

public class MiActivity extends Activity { 

@Override 

protected void onCreate(Bundle savedlnstanceState) { 
super .onCreate(savedlnstanceState); 
setContentView (R. layout. mi_layout_de_mi_activity) ; 


} 

Android la instanciará en algún sitio como lo solemos hacer en Java: 

MiActivity ma = new MiActivity(); 

Solo que nosotros nunca escribiremos la anterior línea. Lo hará Android cuando tenga que hacerlo y con ello 
gestionará el ciclo de vida de la Activity. 

Para declarar la anterior clase en el AndroidManifest.xml, tanta solo tendremos que añadir dentro de la etiqueta 
“<application>” la Activity a declarar. Para el ejemplo bastará con añadir la línea: 

<activity android:name= "miActivity"></ activity> 

Por lo que nuestro AndroidManifest.xml podría quedar tal que así (se explicará cada parte): 

<?xml versión ="1.0” encoding = "utf-8"?> 

Cmanifest xmlns:android= "http://schemas.android.com/apk/res/android" 
package= "com.jarroba.miAplicacion" 
android:versionCode= "1" 
android:versionNam e="1.0" > 

<uses-sdk 

android:minSdkVersion= "16" 
android: targetSdkVersion= 11 21 " /> 

<uses-permission android:name= "android.permission.INTERNET" /> 

<application 

android:allowBackup= "true" 
android:icon= "@drawable/ic_launcher” 
android:label = "@string/app_name" 
android:theme = "@style/AppTheme" > 

<activity 

android:name = ".ActivityMain" 
android:label = "@ string/app_name" > 

<intent-filter> 

<action android:name= "android.intent.action.MAIN" /> 

Ccategory android:name= "android.intent.category.LAUNCHER" /> 

</ intent-filter> 

</ activity> 

<activity android:name= "miActivity ,r X/activity> 

</ application> 

</manifest> 
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¿Qué es debo declarar? 

Algunas cosas que deben ser declaradas (los trozos de código de ejemplo son del ejemplo anterior): 


O El paquete Java que servirá como único identificador de la aplicación, y la versión de nuestra aplicación 


Cmanifest xmlns:android= "http://schemas.android.com/apk/res/android" 

package= "com.jarroba.miAplicacion" 
android:versionCode= "1" 

!= ” 1 . 0 ” 


android:versionName= 


O Descripción de los componentes de la aplicación: Activity, Services, BroadcastReceiver y ContentProvider 


<application 

android:allowBackup= "true" 
android:icon= "@drawable/ic_launcher” 
android:label= ”@string/app_name" 
android:theme = " @ sty le /AppTheme" > 

<activity 

android : name= " . ActivityMain" 
android:label= ”@strlng/app_name” > 

<intent-filter> 

<action android : name= "android.intent.action.MAIN" m _ 

Ccategory android : name= "android.intent.category.LAUNCHER" m 

</intent-filter> 

</ activity> 

<activity android : name= "miActivity"X/ activity> 

</ application> 

O Declarar los permisos que la App requiere para acceder a partes protegidas de la API o para 
interaccionar con otras Apps (en el ejemplo anterior no se utilizan) 

<uses-permission android : name= "android.permission.INTERNET" /> 

O El nivel de la API mínimo y para qué versión se compilará la App 

<use s-sdk _ 

android:minSdkVersion= "16" 
android:targetSdkVersion= "21" /> 


¿Cuáles son las partes sus básicas? 

1. <?xml>: Declaración de la codificación para 
representar los caracteres del documento 

2. <manifest>: Raíz de AndroidManifest.xml que 
contiene el espacio de nombres, el paquete, 
la versión del código interna (para Google 
Play es obligatorio su incremento cada vez 
que se actualiza la aplicación), y la versión 
que verá el usuario 

3. <uses-sdk>: La compatibilidad de la App. 

Contiene la versión mínima de Android que 
soportará la App, y que versión de 
comportamientos y apariencias tendrá la App 

4. <uses-permission>: Solicitud de permisos de 
la aplicación al sistema para poder hacer uso 
de determinadas funciones. Como: acceso a 
la tarjeta de memoria, a Internet, al GPS, etc 

5. <applicalton>: Declaración de los 
componentes de la App. Contiene la copia de seguridad automática, el icono, el nombre a la App y el 
tema 

6. <activity>: Componente Actividad declarado. Tiene un nombre de la clase, y lo que aparecerá de nombre 
la parte superior de la pantalla 

7. <intent-fiIter >: Especifica el tipo de intención que está permitido en la App. 

O <action>: Acción a realizar o quien la llevó a cabo. Ha de empieza por: android.intent.action.ACCION 
O <category>: Nombre de la categoría con información adicional acerca del componente que deberá 
manejar el intent. Empiezan siempre con: android.intent.category.CATEGORIA 


ver3ion= 


q= "ütjf- 


|<manifest xmlns:android= "http ://schemas.android.com/apk/res/android" 

package= "com.jarroba.miAplicacion" 
android:versionCode= "1" 
android:versionName= "1.0" > 


cuses-sdk 

android : minSdkVersion= "14" 
ar.droid : tar getSdk:Version= "1 8 " / > 


U3e3-cerr.i33icr; andró id :r.arae=''android.nerrr.is sien. lyrERyEr" 


<application 

android: allowBacJcup= "true " 
andr oid:icon= "@dravable/i c_launcher" 
android:label= "@string/app_name" 
android:theme= "@style/AppTheme" > 


<activity 

android:name= 


'com.example.manifest. MainActivity” 
^strintf. 


<iñtent-fi1ter> 

<action android:name="android.intent.action.MAIW" /> 
Ccategory android:name= "android.intent.category.LAUNCHER" /> 


</ir.ter.t-f ilter> 

</activity> 


Cactivity android:name= "MarcadorDePuntos "> 
</activity> 


</application> 
n</manifest> 
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¿Qué significa la etiqueta intent-filter que siempre tiene la Activity que arranca Android? 

Como su propio nombre indica es un filtro de intenciones. Cuando declaramos un Intent implícito (intención de 
hacer algo en alguna aplicación que nuestra aplicación no conoce) y lo lanzamos, Android se encarga de buscar 
entre todos los AndroidManifest.xml de todas las aplicaciones instaladas en el dispositivo. Android comprueba 
cuales <intent-filter> permiten que el Intent lanzado pase; lo hará mediante las etiquetas <action> y <category>, 
donde Android mirará si el “category” y “action” del Intent coinciden con las etiquetas <action> y <category> del 
<¡ntent-filter>. 





Intent implícito con: 

• Action; MAIN 
* • Category: LAUNCHER 

• Data: EXTRA_TITLE con "Jarroba App" 


JÉUD 




Referencias: 

O http://developer.android.com/guide/topics/manifest/manifest-intro.html 
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Continuará 


El libro de “Android 100%” es un libro en continua evolución y mejora. Así como lo es el mundo Android. 


Iremos publicando material adicional a medida que lo tengamos. Se puede decir que es un libro sin fin. 


No te pierdas ninguna novedad en www.Jarroba.com 
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